Question

查看这个小提琴将有助于了解我的问题： 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;
}

Answer 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);
    });
});
});

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

1 个答案: