CSS悬停菜单：获取悬停的菜单项以保持悬停状态css

Question

在这种情况下，我如何获得设置以在抛出菜单项时保持悬停状态？是否只有CSS方式或我必须介绍一些JavaScript？感谢。

Answer 1

仅就 。

例如： 如果您的菜单由嵌套列表组成：

li:hover {
    background: #color;
}

li:hover ul {
    display: block;
}

li:hover ul li {}

小提琴：http://jsfiddle.net/maniator/ZC4xv/

上例中的CSS：

#nav-menu > li {
    background: orange;
    float: left;
    padding: 10px;
    border: 1px solid grey;
}

#nav-menu > li:hover a {
    background: red;
    padding: 2px;
    display: inline;
}

#nav-menu > li ul {
    display: none;
    position: absolute;
}

#nav-menu > li:hover ul {
    display: block;
    margin-left: 5px;
}

#nav-menu > li:hover ul li {
    background: blue;
}

#nav-menu > li:hover ul li:hover {
    background: green;
}

Answer 2

假设子菜单是嵌套列表，您可以使用jQuery将悬停类添加到父菜单项：

<ul class="primary-nav">  
    <li>Menu Item 1
        <ul class="sub-nav">
            <li>Sub-Menu Item 1</li>
            <li>Sub-Menu Item 2</li>
        </ul>
    </li>
    <li>Menu Item 2</li>
</ul>

<script>
    $('.primary-nav li').hover(function(){
        $(this).addClass('hover');
    }, function(){
        $(this).removeClass('hover');
    });
</script>  

Answer 3

尝试使用span标记内的顶级项目。假设：

<li>
    <a><span>Setting</span></a>
    <ul>
    ...
    </ul>
</li>

然后这是CSS：

li:hover span {
    background: #color;
    display: block;
}

li:hover ul {
    display: block;
}