How can I define two possibly overlapping CSS dropdown menus? - html

Question

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;
}
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.

Answer 1

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