如何停止居中css下拉菜单的抖动(仅限chrome)

Question

我有一个css驱动的下拉菜单，在Chrome中，当我将鼠标悬停在最后一个选项上时，整个菜单会稍微向左跳。我认为这是因为下拉菜单增加了主列表的整体宽度，尽管它的样式是浮动的。有没有办法解决这个问题？(有趣的是，它在firefox中不能做到这一点)

我注意到，通过使用webdeveloper概述元素，最后一个li在悬停时似乎变宽了，但其他元素都没有变宽。

适用的源码在这里：http://jsfiddle.net/WsAEW/

Answer 1

这对我来说很有效，改变了这一点：

#menu ul li {
    display: inline; 
    position: relative;
}

要这样做：

#menu ul li {
    display: inline-block; 
    position: relative;
}

Answer 2

这是一个修改后的jsfiddle。我想这个问题已经解决了。试试看。

http://jsfiddle.net/WsAEW/5/

顺便说一句，我只改变了下面的风格。“向左浮动”获取水平排列的元素，“display:block”获取顶部元素的大小以包括下拉菜单。

#menu ul li {
    float: left;
    display: block; 
    position: relative;
}