Html CSS菜单-LI/A宽度

我正在创建一个CSS下拉菜单，到目前为止进展顺利，但是我对

或

如果您将鼠标悬停在“关于我们”上，您将看到所有子菜单链接的宽度都不同。我尝试将这两个元素设置为
宽度：100%
，但我猜问题在于
处于绝对位置，没有固定的宽度

你能给我指个正确的方向来解决这个问题吗

注意：这可能在早期版本的IE中还不起作用，这是我下一步将要做的事情

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

HTML


尝试使用：
width:auto而不是
宽度：100%
此菜单将用于Wordpress主题。因此，我不能使用固定宽度，因为我需要灵活性添加更长的链接。所有您需要做的是删除选择器之前的“a”，以便将其应用于li元素，而不是agreat。。。但还有一个问题。。。您必须使用.submenu类吗？Wordpress不使用类呈现菜单，如果我更新了答案，我不想使用自定义菜单结构。这里有一个解决方案的链接，这使得
的宽度很好，但是
没有宽度。我试过让
100%自动运行，但没有成功
    <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>​

 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}
 ​    ​