jquery - CSS 悬停菜单 : getting hovered menu item to keep hovered state css

Question

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

Answer 1

它是仅用 css 就可以实现。

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

li:hover {
    background: #color;
}

li:hover ul {
    display: block;
}

li:hover ul li {}

fiddle :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;
}