Javascript 子菜单被隐藏，z索引无效

查看此小提琴将有助于了解我的问题：

我有一个基本的菜单结构，在这个例子中，菜单2是当前页面。我的子菜单是绝对定位的。z-index对子菜单没有影响，因此我无法使悬停的div位于顶部

<ul class="menu">
    <li>
        <a href="#">Menu 1</a>
        <ul class="sub-menu s1">
            <li><a href="#">Submenu 1-1</a></li>
            <li><a href="#">Submenu 1-2</a></li>
            <li><a href="#">Submenu 1-3</a></li>
        </ul>
    </li>
    <li class="current-menu-item">
        <a href="#">Menu 2</a>
        <ul class="sub-menu s2">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul class="sub-menu s3">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
        </ul>
    </li>
</ul>

---

CSS

---

我想这就是你需要的：

您的jQuery代码需要稍加修改

js:

---

悬停菜单项时，是否希望显示相应的子菜单？如果这是问题所在，只需删除

If

语句即可。

$('.menu > li').hover(function() {
        if (!$(this).hasClass('current-menu-item')) {
            $(this).children('.sub-menu').stop().fadeIn('400');
        }
    }, function() {
        if (!$(this).hasClass('current-menu-item')) {
            $(this).children('.sub-menu').stop().fadeOut('400');
        }
    });

.sub-menu {
    position: absolute;
    display: none;
    top: 75px;
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f38120;
    text-align: center;
    font-size: 0;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
.menu li:hover .sub-menu {
    z-index: 10;
}

$(document).ready(function(){
    $('.menu > li').hover(function() {
    $('.sub-menu').removeAttr('style').hide();
    $(this).find('.sub-menu').fadeIn(400).css("z-index", "999");
}, function() {
    $(this).find('.sub-menu').fadeOut(400, function(){
        $(".current-menu-item").find('.sub-menu').fadeIn(400);
    });
});
});