CSS菜单-LI/A宽度

Question

我正在创建一个CSS下拉菜单，到目前为止进展顺利，但子菜单中的<li>或<a>的宽度有问题。

http://jsfiddle.net/8Cbe8/

如果你把鼠标悬停在"关于我们"上，你会发现所有的子菜单链接都有不同的宽度。我已经尝试将这两个元素都设置为width: 100%，但我猜问题在于<ul>的位置是绝对的，并且没有固定的宽度。

你能告诉我解决这个问题的正确方向吗。

注意：这可能在IE的早期版本中还不起作用，这是我将在下一个中进行的工作

Answer 1

查看此更新的jsFiddle

将其宽度设置为自动。我还包括了一个z索引，所以它呈现在其他元素之上

HTML

    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">The Team</a></li>
                <li><a href="#">In The News</a></li>
            </ul></li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Partners</a></li>
        <li><a href="#">Resellers</a></li>
        <li><a href="#">Our Contact</a></li>
    </ul>
</div>​

CSS

 body{font: 13px verdana; margin: 10px}
#main-nav ul, #main-nav ul li ul {list-style: none; margin: 0; padding:0;}
#main-nav ul li{
    display: block;
    float: left;
    position: relative;
}
#main-nav ul li a{
    display: block;
    height: 35px;
    line-height: 35px;
    background: lightblue;
    padding: 0 10px;
    color: black;
    text-decoration: none;
}
#main-nav ul li a:hover{background: #EEE}
#main-nav ul li:hover ul{left: 0px;}
/* This is the bit I'm having a problem with  */
#main-nav ul li ul{
    position: absolute;
    left: -9999px;
    top:35px;
    background: lightblue;
}
#main-nav ul li ul li {white-space: nowrap; width: 100%; z-index: 999}
 ​    ​

Answer 2

尝试使用：width: auto;而不是width: 100%;