為什么二級ul下的兩個li的寬度不一樣
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>菜單效果</title>
? ? <style>
? ? *{
? ? ? ? margin:0;
? ? ? ? padding:0;
? ? }
? ? ? ? #nav{
? ? ? ? ? ? background-color: #eee;
? ? ? ? ? ? width:600px;
? ? ? ? ? ? height:40px;
? ? ? ? ? ? margin:0 auto;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? ul li{
? ? ? ? ? ? /*width:90px;為了li的寬度自適應，需要將width屬性刪除，添加padding屬性*/
? ? ? ? ? ? /*padding:0 10px; 雖然整個a標簽都有背景色了，但是并不是整個li，因為在li中設置了padding，使得a標簽的寬度為32px，加上左右各10px的padding等于li標簽的寬度52px，所以把padding加在a標簽中*/
? ? ? ? ? ? float:left;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 40px;
? ? ? ? ? ? position: relative;/*使二級菜單的位置定位是相對于一級菜單的*/
? ? ? ? }
? ? ? ? a{
? ? ? ? ? ? text-decoration:none;
? ? ? ? ? ? color:black;
? ? ? ? ? ? display:block;/*想要整個li都有背景色，需要將a標簽編程塊元素*/
? ? ? ? ? ? padding:0 10px;
? ? ? ? ? ? height:40px; /*若不設置高度，在IE7瀏覽器中a的高度會變小*/
? ? ? ? }
? ? ? ? a:hover{
? ? ? ? ? ? color:#fff;
? ? ? ? ? ? background-color: #666;/*a標簽是一個行內元素，設置背景色，只有文字的一小塊有背景色*/
? ? ? ? }
? ? ? ? ul li ul li{? /*二級菜單,一級菜單的寬度會隨著二級菜單寬度的增加而增加*/
? ? ? ? ? ? clear:both;? /*它會繼承一級li的float屬性，需要清除*/
? ? ? ? ? ? background-color: #eee;
? ? ? ? ? ? margin-top:2px;
? ? ? ? }
? ? ? ? ul li ul{
? ? ? ? ? ? position: absolute;? /*為了使一級菜單寬度不受二級菜單的影響*/
? ? ? ? ? ? top:40px;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? display:none; /*剛開始的時候先隱藏*/
? ? ? ? }?
? ? ? ? ul li ul li a:hover{
? ? ? ? ? ? background-color: #06F;
? ? ? ? }
? ? ? ? ul li:hover ul{ /*當鼠標移動到一級ul的li上時，改變li下面的ul的樣式*/
? ? ? ? ? ? display: block;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="nav">
? ? ? ? <ul>
? ? ? ? ? ? <li><a href="#">首頁</a></li>
? ? ? ? ? ? <li><a href="#">課程大廳</a>
? ? ? ? ? ? ? ? <ul> <!--二級菜單-->
? ? ? ? ? ? ? ? ? ? <li><a href="#">javascript</a></li>
? ? ? ? ? ? ? ? ? ? <li><a href="#">jquery</a></li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li><a href="#">學習中心</a></li>
? ? ? ? ? ? <li><a href="#">經典案例</a></li>
? ? ? ? ? ? <li><a href="#">關于我們</a></li>
? ? ? ? </ul>
? ? </div>
</body>
</html>
2020-03-26
因為你自始至終都沒有設置過width啊，那就寬度就會被字體長度填充了
2019-05-29
加一個樣式?
ul?li?ul?li?{ ????width:?100%; }就可以了。望采納