为什么二级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>
