Question

我正在使用CSS下拉菜单，其CSS基本上是这样的：

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

我的标记看起来像这样：

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

在这种情况下会发生的情况是，下方菜单项的导航栏会覆盖顶部菜单（“navcontainer”div中的一个）下拉项目。我认为这是由于下拉类的z-index。

如何重新设置页面样式以使我的下拉列表正确重叠？我希望顶部下拉列表始终覆盖底部下拉列表，如果可以，但我想尽可能多地重复使用样式。

Answer 1

经过一些修补，我想我有一个解决方案。看看这个：

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

有一些DOM更改和样式。这是代码：

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

如何定义两个可能重叠的CSS下拉菜单？

1 个答案: