CSS菜单-出现子菜单时主选项变宽-如何解决？

【问题标题】：CSS menu - main option makes wider when submenu appears - how to fix it?CSS菜单-出现子菜单时主选项变宽-如何解决？
【发布时间】：2013-05-23 12:21:22
【问题描述】：

这是我的代码：

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

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

我该如何解决？

【问题讨论】：

标签： css menu hover

【解决方案1】：

试试这个

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

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

【讨论】：

谢谢，它有帮助。我喜欢它。

【解决方案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

【讨论】：

谢谢，它有帮助，但我更喜欢 Naynana 的方式（上面/下面回答）。