Question

我一直在尝试实现Level 2菜单下Level 1菜单显示的效果。到目前为止，我分别为z-index: 10;和z-index: 5;尝试了.nav > ul > li > ul和.nav > ul > li > ul > li > ul。那不适合我。有没有其他方法可以达到预期的效果？

Demo Fiddle

How to make this Level 1 sub-menu to overlap the Level 2 menu?

标记：

<div class="nav">
    <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li>
            <a href="#">Hover</a>
            <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li>
                    <a href="#">Hover Here</a>
                    <ul>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>    
                    </ul>
                </li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
}
.nav{
    background: #282828;
    width: 100%;
}
.nav ul li{
    list-style: none;
    display: inline-block;
    margin-right: -4px;
    position: relative;
}
.nav a{
    background: #282828;
    color: #ddd;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    font-size: 24px;

}
.nav > ul > li > ul > li > a:hover, 
.nav > ul > li > ul > li > ul > li > a:hover{
    background: #404040;
    color: #AFAFAF; 
}
.nav > ul > li > ul, .nav > ul > li > ul > li > ul {
    position: absolute;
    white-space: nowrap;
}
.nav > ul > li > ul > li, .nav > ul > li > ul > li > ul > li {
    display: block;
    position: relative;
}
.nav > ul > li > ul, .nav > ul > li > ul > li > ul {
    opacity: 0;
    visibility: hidden;
}
.nav > ul > li > ul {
    top: 75px;
    transition: all .2s ease-in-out;
}
.nav > ul > li:hover > ul, .nav > ul > li > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
}
.nav > ul > li:hover > ul {
    top: 100%;
    transition: all .2s ease-in-out;
}
.nav > ul > li > ul > li > ul {
    top: 0;
    left: 0;
    transition: all 2s ease-in-out;
}
.nav > ul > li > ul > li:hover > ul{
    left: 100%;
    transition: all 2s ease-in-out;
}

Answer 1

编辑：

得到了!!将z-index: -1;添加到上次ul：）

.nav > ul > li > ul > li > ul{
     z-index: -1;
}

请参阅W3's doc关于CSS 2.1 z-index和负值：

[...]盒子可能有负的堆叠水平[...]

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：


形成堆叠的元素的背景和边界   上下文。

具有负堆栈级别的子堆叠上下文（大多数   否定第一）。

流入的，非内联级别，未定位的后代。

未定位的花车。

流入的，内联级别，未定位的后代，包括   内联表和内联块。

堆叠级别为0且定位的子堆叠上下文   堆栈级别为0的后代。

具有正堆栈级别的子堆叠上下文（最少   积极的第一）。

Updated & working fiddle

上一个回答：

<击> 添加z-index: n;，其中n＆gt; 0到你的上一个ul，并使幻灯片转到左边的70％。

.nav > ul > li > ul > li:hover > ul{ left: 70%; transition: all 2s ease-in-out; } .nav > ul > li > ul > li > ul { z-index: 1; /* Its position is already set to absolute, line 42 */ }

<击> Fiddle

Answer 2

添加职位：亲属;和z-index：100到“Hover here”链接和z-index：1;到Level2子菜单

.nav a {
    background: #282828;
    color: #ddd;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    font-size: 24px;
    position: relative;
    z-index: 100;
}

.nav > ul > li > ul > li > ul {
    top: 0;
    left: 0;
    transition: all 2s ease-in-out;
    z-index: 1;
}

小提琴： http://jsfiddle.net/YLPLx/1/

如何使1级子菜单与2级菜单重叠？

2 个答案:

编辑：