如果你在创建css菜单时出现上述情况，那么我建议你认真阅读下，或许偶然你解决了，但是你并不知道问题的关键，是什么原因导致这样呢。如果你没有遇到过，那么你更应该仔细阅读下，因为很可能你马上就会遇到。下面我们一起来分析下。
html代码如下：
<ul id="menu"> <li><a href="#">My</a></li> <li><a href="#">Little</a></li> <li><a href="#">Menu</a></li> </ul>
首先我们设置a链接的css如下：（因为想要把a链接变成整个区块，而不是仅文字，所以设置a为block）
ul#menu li a {
display: block;
width: 130px;
text-align: center;
font-weight: bold;
float: left;
color: white;
font-size: 1.2em;
text-decoration: none;
background: #600;
}
按正常思路，现在应该出现我们需要的效果，可是我们会发现这时我们的效果是上面的那个台阶式的菜单。 原因是因为我们的li是区块元素，我们没有设置浮动，它显示的是一行，所以解决方案是将菜单的display设置为inline。
ul#menu li { display: inline; }这样就会出现我们希望的效果：
英文原文：css-tricks.com/prevent-menu-stepdown/
这个在IE7 下才会有 IE6 没有测试！估计是IE的bug.
