Пользовательская навигация Wordpress с выпадающим меню

Question

Я использую WordPress 3.2.1 и работал над wp_nav_menu, чтобы получить настроенное «Главное меню навигации», которое выглядит так:

    <ul id="nav-list">
        <li><a href="">HOME</a></li>
        <li><a href="">THE ASSOCIATION</a></li>
            <ul class="sub-menu">
                <li>
                   <a>WHO WE ARE</a>
                </li>
            </ul>
        <li><a href="">CONTACTS</a></li> 
        <li><a href="">PRODUCTS</a></li>
            <ul class="sub-menu">
                <li>
                   <a>SHOES</a>
                </li>
                <li>
                   <a>UMBRELLAS</a>
                </li>
            </ul>          
   </ul>

css, которое я имею для меню:

#nav-list{
float:left;
margin-left:290px;
}

#nav-list li
{
display:inline ;
padding:4px 18px 4px 0 ;
}

.sub-menu
{
float:left;
display:none;
}

ul#nav-list li:hover ul.sub-menu
{ 
background:red;
position:absolute;
top:20px;
z-index:9999;
display: block;

}

Подменю по умолчанию скрыты, но отображаются при наведении на них родителя. Все работает нормально, но при наведении на родительское подменю абсолютно положено левое значение = 0, и я хочу, чтобы оно находилось прямо под родительской кнопкой! Как мне этого добиться?

спасибо

Luca

Answer 1

просто установите родительскую позицию li относительно; # nav-list li {position: родственник}

я сделал это на jsfiddle для тебя, к вашему сведению, я вынул поле слева в # nav-list, чтобы оно было более понятным.

http://jsfiddle.net/jalbertbowdenii/deVYx/