CSS悬停菜单:获取悬停菜单项以保持悬停状态CSS [英] CSS hover menu: getting hovered menu item to keep hovered state css

问题描述

在这种情况下，我如何获得设置以在扔菜单项时保持悬停状态?有没有CSS唯一的方法，还是我必须引入一些JavaScript?谢谢.

In this situation how would I get the setting to keep the hovered state while going threw the menu items? Is there a CSS only way or would I have to introduce some javascript? Thanks.

推荐答案

仅使用CSS即可 .

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

For example: If your menu is made of nested lists:

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

这篇关于CSS悬停菜单:获取悬停菜单项以保持悬停状态CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！