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

在position开始行动之前，您需要为元素提供一些z-index。我建议您将其添加到.navigation分频器而不是li元素中：

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

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

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

Answer 2

看看这个FIDDLE

另外，因为我心情很好，所以我调整了into a sample horizontal menu

您需要使用：

ul ul{
    position:absolute;
}

如果没有将position设置为absolute，则会在下一个列表项之前有效地注入内容。您不一定需要将z-index用于垂直菜单。

Answer 3

如果没有z-index您需要为您的元素设置position，

position无效。

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

Reference

Answer 4

如果没有position，

，您将看不到转场

你需要relative来影响div。

..我也为你做了一个很好的小韵:) :)

下拉列表显示在内容下方（尝试z-index）

CSS

HTML

4 个答案:

看看这个FIDDLE