子菜单被隐藏，z-index 无效答案

【问题标题】：Submenu is hidden and z-index has no effect子菜单被隐藏，z-index 无效
【发布时间】：2014-04-25 17:53:42
【问题描述】：

查看这个小提琴将有助于解决我的问题： http://jsfiddle.net/rgbjoy/JnL33/

我有一个基本的菜单结构，在这个例子中，菜单 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>

jQuery

$('.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');
        }
    });

CSS

.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;
}

【问题讨论】：

悬停菜单项时，您希望显示相应的子菜单吗？如果这是问题，只需删除 if 语句。

标签： javascript html css drop-down-menu navigation

【解决方案1】：

我认为这就是你需要的：http://jsfiddle.net/JnL33/7/

您的 jQuery 代码需要稍作修改。

js:

$(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);
    });
});
});

【讨论】：