首先声明不推荐这样定义css样式，易于继承混淆。
1.比如有这样的下拉菜单：
代码如下：
<!doctype html> <html lang="en"> <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{position: relative;float: left;line-height: 40px;text-align: center;} ul li:hover ul{display: block;} ul li a{text-decoration: none;padding: 0 10px;color: #000;display: block;} ul li a:hover{color: #fff;background-color: #bbb;} ul li ul{display: none;position: absolute;left: 0px;top: 40px;} ul li ul li{float: none;background-color: #eee;margin-top:2px; } ul li ul li a:hover{background-color: #06f;} </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> <ul> <li><a href="#">JavaScriptJavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">案例</a></li> <li><a href="#">关于</a></li> </ul> </div> </body> </html>
在主流浏览器上显示都如前面图所示，但在IE7下显示是这样的：
出现BUG原因是没有设置a标签的高度：ul li a{height:40px;},接着会出现这样的情况：
这是因为没有设置二级菜单li的宽度，设置ul li ul li{140px;},此时显示正常，文字也是居中的。
IE7会出现这种情况的原因是，二级li下的a标签继承了一级li下a标签的display:block，设置了块显示就要设置其宽度或高度。
2.若是希望二级菜单内容宽度自适应，可以采取这样的方法：
把一级菜单的ul li{position:relative;} 相对定位去掉，二级菜单宽度就可以自适应了，再把ul li ul绝对定位的top和left值去掉，就可以实现，同时这种方法也没有在IE7的兼容问题。不过这种方法不推荐使用，position属性的relative与absolute最好一起使用。
<!doctype html> <html lang="en"> <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{float: left;line-height: 40px;text-align: center;} ul li:hover ul{display: block;} ul li a{text-decoration: none;padding: 0 10px;color: #000;display: block;} ul li a:hover{color: #fff;background-color: #bbb;} ul li ul{display: none;position: absolute;} ul li ul li{float: none;background-color: #eee;margin-top:2px;} ul li ul li a:hover{background-color: #06f;} </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> <ul> <li><a href="#">JavaScriptJavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">案例</a></li> <li><a href="#">关于</a></li> </ul> </div> </body> </html>