Sticky header: 子菜单不显示

Question

我试图找到这个问题的答案，但似乎没有任何内容适用于我的情况。

我有一个 header，包括上面的 space（在我的例子中称为 "void"）和下面的菜单。

向下滚动时，header 会向上移动，菜单会按预期固定在屏幕顶部。

到目前为止一切顺利。

问题是这个菜单有一个子菜单。但是这个子菜单只有在菜单没有贴在屏幕顶部时才有效。

现在，我知道这是因为当菜单是 "fixed" 时，子菜单也应该是 "fixed" 定位，但在我的情况下，它不起作用，因为子菜单是固定的，但是它消失在页面的其余部分后面，无论我给它什么 z-index（或者我给页面的任何其他组件的任何 z-index，真的）。

所以我觉得我尝试了所有我能想到的方法，但还是卡住了。

我做了一个 JSFiddle，你可以测试我的脚本。要复制错误，只需在 header 未卡住时将鼠标悬停在菜单上，然后向下滚动后再次执行相同操作。没有卡住的时候可以用，但是卡住的时候子菜单不会出现。

感谢您的帮助。

HTML

<header>
    <div class="void"></div>
    <nav class="menu">
        <ul class="block">
            <li class="item">xxxxx</li>
            <li class="item">xxxxx</li>
            <li class="item drop">Hover here
                <div class="dropdown-content">
                    <a href="">submenu 1</a>
                    <a href="">submenu 2</a>
                </div>
            </li>
            <li class="item">xxxxxx</li>
        </ul>
    </nav>
</header>

CSS

body{
    width:100%;
    height:6000px;
    margin:0px;
    padding:0px;
    background: #ccc;
}

header{
    position:relative;
    width:100%;
    background: #fff;
    z-index:1;
    height:146px;
}

.void{
    position:relative;
    width:100%;
    height:100px;
}

.menu{
    position:relative;
    width:100%;
    height:54px;
    background:#aaa;
}

.menu ul{
    height:100%;
    margin:0px;
    padding:0px;
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.item{
    display:inline-block;
    flex-direction: column;
    height:100%;
    color:#41546F;
    line-height:54px;
    font-size:13px;
}

.block {
    position: relative;
    z-index:1;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 140px;
    z-index: 1;
    margin-left:-40px;
    margin-top:0px;
    background:#21242b;
    padding:16px;
}

.dropdown-content a {
    display: block;
    color:#a2a9b9;
    line-height:32px;
}

.drop a:hover {
    color: #fff;
}

.drop:hover .dropdown-content {
    display: block;
}

.fixed{
    position: fixed;
    overflow: hidden;
    left:0px;
    top: 0px;
}

JQUERY

$(window).scroll(function() {
    if ($(document).scrollTop() > 92){
        if (!$('.fixed').length){$('.menu').addClass('fixed');}
    } 
    else {
        if ($('.fixed').length){$('.menu').removeClass('fixed');}                  
    }     
});

JSFiddle

https://jsfiddle.net/3xnjeh01/

Answer 1

.fixed 上的 overflow: hidden 存在问题。
它隐藏了子菜单，您只需将其删除即可。

.fixed {
    position: fixed;
    left: 0;
    top: 0;
}

Sticky header: 子菜单不显示

Sticky header: sub menu doesn't show up

html

css

jquery

sticky

drop-down-menu