css - CSS menu - main option makes wider when submenu appears - how to fix it?

Question

This is my code:

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

The problem is - main <li> becomes wider, because <ul> inside has more text.

How can I fix it?

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