CSS菜单 - 当子菜单出现时，主选项变宽 - 如何修复？

Question

这是我的代码：

http://jsfiddle.net/e92Dj/17/

问题是 - 主<li>变宽，因为<ul>里面有更多文字。

我该如何解决？

Answer 1

试试这个

ul#mainmenu > li:hover > ul
{
    display: block;
    position:absolute;
}

http://jsfiddle.net/e92Dj/22/

Answer 2

这对您来说可能是一个很好的解决方案：

ul#mainmenu > li
{   
    display: inline-block;
    margin: 0;
    vertical-align: top;    

    width:50px;
}

ul#mainmenu > li > ul 
{
    display: none;      
    margin-left:-40px;
    width:200px;
}

和你的jsFiddle： JsFiddle