固定导航栏将下拉菜单置于最前面

Question

我正在尝试制作一个带有动画下拉菜单的固定导航栏，因此我使用了 z-index 堆叠而不是 display:none。但是，此下拉菜单继承了导航栏的 z-index 属性，其堆叠索引为 99999。因此它将下拉菜单置于最前面，与其他内容重叠。结果，当用户将光标移动到下拉菜单所在的位置时，它就会出现。我张贴了一张图片以获得更好的说明。

HTML 标记

<li class="ic-quick-nav-items ic-quick-nav-items--dropdown">
    <button class="ic-quick-nav-dropdown">Listening <i class="fa fa-chevron-down"></i></button>
    <ul class="ic-dropdown">
        <li class="ic-dropdown-items"><a href="#" class="ic-dropdown-links" tabindex="-1">Listening Practice</a></li>
         <li class="ic-dropdown-items"><a href="#" class="ic-dropdown-links" tabindex="-1">Tips & Tricks</a></li>
     </ul></li>

这是我的整个导航栏的 CSS 代码：

#ic-nav-border {
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}
.ic-quick-nav-items--dropdown {
    position:relative;
}
.ic-quick-nav-items--dropdown:hover  .ic-dropdown {
    visibility:visible;
    opacity:1;
    z-index:5;
    top:42px;
}
.ic-quick-nav-dropdown {
    background-color:transparent;
    border:0;
    font-size:16px;
    padding:11.5px;
    width:100%;
    text-align:center;
    cursor:pointer;
    transition:color 0.4s;
    -o-transition:color 0.4s;
    -moz-transition:color 0.4s;
    -webkit-transition:color 0.4s;
}
.ic-quick-nav-dropdown:hover, .ic-quick-nav-dropdown:active, .ic-quick-nav-dropdown:focus {
    color:rgba(215, 84, 77, 1);
}
.ic-dropdown {
    position:absolute;
    left:0;
    top:80px;
    list-style:none;
    visibility: none;
    opacity:0;
    padding:20px;
    min-width:120px;
    z-index:-1;
    white-space: nowrap;
    display:inline-block;
    border:1px solid #eee;
    background-color: rgba(255,255,255,1);
    transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

由 jQuery 设置的固定导航栏导致内联 CSS 代码

<div class="ic-header-part-wrapper header-sticky theme-light" id="ic-nav-border" style="position: fixed; z-index: 99999; top: 0px; left: 0px; right: 0px;">

我应该应用什么堆叠解决方案才能使下拉菜单保留在后面并且导航栏固定在顶部？

编辑： 实际上，整个导航是粘性的，因此它有两种状态：静态和固定。在静态状态下它工作正常，但在固定状态下它不

Answer 1

老实说，看起来唯一的错误是 visibility 上 .ic-dropdown 的属性值不正确，正如您所说 none 应该 hidden。

因此，您的 visibility 没有应用，并且元素只是 "hidden" 因为 opacity，它保存指针事件。所以当你鼠标悬停在它占据的space上时，它仍然会触发动画

所以修复 .ic-dropdown{visibility:hidden} 它应该可以正常工作。你可以在那里摆脱所有的 z-indexes，我仍然不确定你为什么要开始使用它们。

固定导航栏将下拉菜单置于最前面

Fixed navbar brings dropdown to front

css

jquery

z-index