Question

我创建了垂直导航菜单。请参阅我下面的html，css和jquery。当我将鼠标悬停在链接上时，它会更改链接的颜色，但不会显示它的子div“子菜单”。谁能帮我找出问题所在？预先感谢。

HTML

<span class="nav-menu-list">
    <ul>
        <li><a href="#"><h2>Home</h2></a>
            <span class="sub-menu"><img src="images/home-preview.png" /></span>
        </li>
        <li><a href="#"><h2>Category</h2></a>
            <span class="sub-menu">
                <div><a href="#"><h4>Category 1</h4></a></div>
                <div><a href="#">Category 2</h4></a></div>
            </span>
        </li>
        <li><a href="#"><h2>About us</h2></a></li>
    </ul>
</span>
<span class="nav-menu-list-details">some content</span>

CSS

.nav-menu-list {
    position: absolute;
    height: 100%;
    left: 0;
    background: rgba(7, 88, 157, .75 );
    z-index: 999;
}
.nav-menu-list ul {
    padding: 150px;
}
.nav-menu-list ul li {
    display: none;
    color: #fff;
    text-transform: uppercase;
}
.nav-menu-list ul li .sub-menu {
    display: none;
    position: absolute;
    top: 120px;
    left: 40%;
}

.nav-menu-list-details {
    position: absolute;
    height: 100%;
    right: 0;
    background: rgba(7, 88, 157, .97);
    z-index: 998;
}

jquery

$('.nav-menu-list ul li a').hover(function(){
    $(this).css({'color':'#F8971D'});
    $(this).children('sub-menu').show();
},function(){   
    $(this).css({'color':'#fff'});
    $(this).children('sub-menu').hide();
});

Answer 1

使用以下命令更改您的jQuery：

$('.nav-menu-list ul li a').hover(function(){
    $(this).css({'color':'#F8971D'});
    if( $(this).next('span.sub-menu').length > 0 ) {
        $(this).next('span.sub-menu').show();
    }
},function(){   
    $(this).css({'color':'#fff'});
    if( $(this).next('span.sub-menu').length > 0 ) {
        $(this).next('span.sub-menu').hide();
    }
});

悬停在父母身上不显示孩子

1 个答案: