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

Question

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

Demo Fiddle

标记：

<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和负值：

  

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

     

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

     

  
1. 形成堆叠的元素的背景和边界   上下文。
  
2. 具有负堆栈级别的子堆叠上下文（大多数   否定第一）。
  
3. 流入的，非内联级别，未定位的后代。
  
4. 未定位的花车。
  
5. 流入的，内联级别，未定位的后代，包括   内联表和内联块。
  
6. 堆叠级别为0且定位的子堆叠上下文   堆栈级别为0的后代。
  
7. 具有正堆栈级别的子堆叠上下文（最少   积极的第一）。
  

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/