WordPress custom navigation with dropdown menu

I’m using wordpress 3.2.1 and worked on the wp_nav_menu to get a customized “Top navigation menu” that looks like 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 have for the 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 by default hidden but they display on their parent’s hover.Everything works fine but on the parent’s hover the sub-menu is absolutely posiitoned with left=0 and I want it to be right under the parent button!How can I achieve that?

thanks

Luca