Меню CSS - ширина LI / A

Question

Я создаю раскрывающееся меню CSS, которое пока идет хорошо, однако у меня есть проблема с шириной <li> или <a> в подменю.

http://jsfiddle.net/8Cbe8/

Если вы наведете курсор на «О нас», вы увидите, что все ссылки подменю имеют разную ширину.Я попытался установить оба элемента на width: 100%, но я предполагаю, что проблема связана с тем, что <ul> абсолютно позиционирован и не имеет фиксированной ширины.

Не могли бы вы указать мнеправильное направление, чтобы это исправить.

ПРИМЕЧАНИЕ. Вероятно, это еще не сработает в более ранних версиях IE, но над этим я буду работать в следующем

Answer 1

Смотрите это обновление jsFiddle

Установите ширину, чтобы это было автоматически. Я также включил z-index, чтобы он отображал поверх других элементов

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%;