                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

我的代码在联系我们那把代码由Tel改成电话就变的不好看了，不知道该怎么修改，希望老师解疑！

*{ margin:0px; padding:0px;}

#nav{ background-color:#999; width:600px; height:40px; margin:0 auto}

ul li{list-style:none;}

ul li{float:left; line-height:40px; text-align:center; position:relative;}

a { text-decoration:none; color: #00F; display:block; padding:0 10px; }

a:hover{ color: #000; background-color: #3FF;}

ul li ul li{ float:none; background-color: #3FF; margin-top:2px;}

ul li ul{ position:absolute; left:0px; top:40px; display:none;}

ul li ul li a:hover{ color: #6F6; background-color: #666;}

ul li:hover ul{ display:block;}

</style>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

月下守望3741497

2016-07-28

源自：形形色色的下拉菜单 3-1

关注问题我要回答

305

操作

收起

1 回答

脑阔疼回答被采纳 +3 积分
2016-07-28

给这里

ul li ul li{ float:none; background-color: #3FF; margin-top:2px;}

第一种方法：增加width:150px或者多少宽一点让他不会超出

第二种方法增加属性

display:block;

overflow:hidden；

text-overflow: clip；//直接隐藏掉超出部分就不会换行或者clip换成ellipsis 超出用省略号代替。

第三中

display:block;/*内联对象需加*/
width:100px;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/