html - 下拉菜单出现在内容下方(尝试过 z-index)

Question

我在尝试让我的下拉菜单(子菜单)出现在内容上方时遇到了一些困难。我已经尝试过 z-index 但仍然没有解决。

最初，子菜单的高度为 0 并溢出隐藏(因此不显示)。我添加了 JQuery 以在单击子菜单的父级时添加打开类。然后我就设置了高度。菜单随着过渡看起来很好，但是下拉菜单位于内容下方，无法单击。

有人可以帮忙吗？

CSS

.sub-menu{
 height:0;
 overflow:hidden;
}

.sub-menu li {
 width: 100%;
 display: block;
 clear: both;
 border-top:1px solid;
}

.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
 z-index: 5000;
}

li.sub-menu-parent:hover .sub-menu {
 height: 204px;
}

---

HTML

                <div class="col navigation">            
                    <nav>
                    <ul>
                        <li class="sub-menu-parent"><a href="#">Menu Item 1</a>
                                <ul class="sub-menu">
                                    <li class="sub-close"><a href="#">Back</a></li>
                                    <li><a href="#">Sub Item 1</a></li>
                                    <li><a href="#">Sub Item 1</a></li>
                                    <li><a href="#">Sub Item 1</a></li>
                                    <li><a href="#">Sub Item 1</a></li>
                                </ul>
                        </li>
                        <li><a href="#">Menu Item 2</a></li>
                        <li><a href="#">Menu Item 3</a></li>
                        <li><a href="#">Menu Item 4</a></li>
                        <li class="sub-menu-parent"><a href="#">Menu Item 5</a>
                                <ul class="sub-menu">
                                    <li class="sub-close"><a href="#">Back</a></li>
                                    <li><a href="#">Sub Item 5</a></li>
                                    <li><a href="#">Sub Item 5</a></li>
                                    <li><a href="#">Sub Item 5</a></li>
                                    <li><a href="#">Sub Item 5</a></li>
                                </ul>
                        </li>
                    </ul>
                    </nav>
                </div>

Answer 1

在 z-index 生效之前，您需要给元素一些位置。我建议也将其添加到您的 .navigation 分隔符而不是 li 元素中:

div.navigation {
    position: relative;
    z-index: 5000;
}

为了安全起见，您应该为您的内容提供较低的 z-index:

{contentSelector} {
    position: relative;
    z-index: 1;
}