一级菜单宽度影响二级菜单宽度，怎么破？
各位大大，这里的二级菜单的宽度不影响一级菜单啊，可是一级菜单宽度影响二级菜单呀，是什么原因？怎么解决？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单制作</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#nav{width:960px;margin:0 auto;background-color: yellowgreen;height:45px;}
ul li{float:left;list-style: none;line-height: 45px;text-align: center;position:relative;}
a:hover{background-color:#ccc;color:pink;}
a{text-decoration: none;padding:0 10px;display:block;}
ul li ul{position:absolute;top:45px;left:0px;display:none;}
ul li:hover ul{display:block;}
ul li ul li{clear:left;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">导航航</a>
<ul>
<li><a href="">娱导航导导乐</a></li>
<li><a href="">生活</a></li>
<li><a href="">工作</a></li>
</ul>
</li>
<li><a href="">兴趣航导航航导航</a>
<ul>
<li><a href="">影音导航导航导</a></li>
<li><a href="">读书</a></li>
<li><a href="">旅行</a></li>
</ul>
</li>
<li><a href="">圈子航导航</a></li>
</ul>
</div>
</body>
</html>
