How can I define two possibly overlapping CSS dropdown menus?

I'm using a CSS dropdown menu that has CSS basically like this:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}开发者_JAVA百科

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

My markup looks like this:

<div class="navcontainer" style="width: 100%;"> 

<ul id='saas-nav' class='dropdown'> 
    <li class='menu www'><a href='/saas/clients'>Surveys</a></li> 
    <li class='menu dir'><a href='#'>Preferences</a> 
    <ul> 
        <li class='menu flex'><a href='/admin/flex_module/saas_static/swf/Preferences.swf'>My Login</a></li> 
        <li class='menu www'><a href='/admin/my_clients/'>My Clients</a></li> 
        <li class='menu www'><a href='/admin/my_projects/'>My Projects</a></li> 
    </ul>
    </li> 
    <li class='menu www'><a href='/admin/users'>Users</a></li> 
</ul> 

</div> 

<!-- a small amount of content -->

<div style="width: 100%; padding-top: 4px;"> 

<ul id='survey-menu' class='dropdown'> 
    <li class='menu dir'><a href='#'>Survey</a> 
    <ul> 
         <li class='menu www'><a href='/saas/survey/useful_info/674'>Information</a></li> 
         <li class='menu www'><a href='/saas/survey/674/notes'>Notes</a></li> 
         <li class='menu www'><a href='/documents/674/'>Documents</a></li> 
    </ul>
    </li> 
    <!-- ... -->
</ul>

What happens in this case is that the top menu's (the one in the 'navcontainer' div) dropdown items are covered by the navbar of the lower menu item. I believe that this is due to the z-index of the dropdown classes.

How can I re-style the page so that my dropdowns overlap properly? I want the top dropdown to always cover the bottom one, if it can, but I want to re-use as much of the styling as possible.

After a bit of tinkering, I think I have a solution. Check this out:

http://jsfiddle.net/hpvgH/6/

There is a bit of DOM changes and also styles. Here is the code:

<div class="navcontainer" style="width: 100%;"> 

    <ul id='saas-nav' class='dropdown'> 
        <li class='menu www'><a href='/saas/clients'>Surveys</a></li> 
        <li class='menu dir'><a href='#'>Preferences</a> 
            <ul> 
                <li class='menu flex'><a href='/admin/flex_module/saas_static/swf/Preferences.swf'>My Login</a></li> 
                <li class='menu www'><a href='/admin/my_clients/'>My Clients</a></li> 
                <li class='menu www'><a href='/admin/my_projects/'>My Projects</a></li> 
            </ul>
        </li> 
        <li class='menu www'><a href='/admin/users'>Users</a></li> 
    </ul> 

</div> 

<!-- a small amount of content -->

<div class="navcontainer" style="width: 100%; padding-top: 4px;"> 

    <ul id='survey-menu' class='dropdown'> 
        <li class='menu dir'><a href='#'>Survey</a> 
            <ul> 
                <li class='menu www'><a href='/saas/survey/useful_info/674'>Information</a></li> 
                <li class='menu www'><a href='/saas/survey/674/notes'>Notes</a></li> 
                <li class='menu www'><a href='/documents/674/'>Documents</a></li> 
            </ul>
        </li> 
        <!-- ... -->
    </ul>
</div>

*{margin: 0; padding: 0;}

.navcontainer{clear: both;}

ul.dropdown,
ul.dropdown ul {
    list-style: none;
    z-index: 10;
}

ul.dropdown li {
    float: left;
    position: relative;
    padding: 0 3px;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
}

ul.dropdown ul {
    display: none;
    position: absolute;
    top: 10px;
    left: 99%;
    background-color: red;
}

ul.dropdown li:hover  ul{
    display: block;
}