html - 如何使一级子菜单与二级菜单重叠？

Question

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

演示小提琴

标记：

<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关于 CSS 2.1 z-index 和负值的文档：

[...] 盒子可能有负堆栈级别 [...]

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

1. 构成堆叠上下文的元素的背景和边框。
2. 具有负堆栈级别（最负优先）的子堆栈上下文。
3. 流入的、非内联级别的、非定位的后代。
4. 未定位的浮动。
5. 流入的、内联级的、非定位的后代，包括内联表和内联块。
6. 堆栈级别 0 的子堆栈上下文和堆栈级别 0 的定位后代。
7. 具有正堆栈级别的子堆栈上下文（最不积极的优先）。

更新和工作小提琴

---

上一个答案：

将z-index: n;where n > 0 添加到您的 last 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 */
}

小提琴

Answer 2

添加一个位置：relative; 和 z-index: 100 到“悬停在这里”链接和 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/