固定导航栏将下拉列表添加到前面

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。

因此，您的opacity未应用，并且该元素仅被“隐藏”，因为.ic-dropdown{visibility:hidden}包含指针事件。因此，当您将鼠标悬停在它占据的空间上时，它仍会触发动画。

所以修复nameserver 10.0.0.2 search openstacklocal 它应该可以正常工作。你可以摆脱那里的所有z索引，我仍然不确定你为什么要开始使用它们。