I am using wordpress 3.2.1 and done the wordpress_nav_menu to obtain a personalized "Top navigation menu" that appears such as this:

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

the css I've for that menu is:

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

}

The sub-menus are automatically hidden however they display on their own parent's hover.Everything works fine but around the parent's hover the sub-menu is completely posiitoned with left= and that i would like it to be right underneath the parent button!How do i make that happen?

thanks

Luca

just set parents li's position to relative #nav-list li

used to do it on jsfiddle for ya, fyi i got the margin-left around the #nav-list so its more obvious.

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