CSShover菜单：获取hover菜单项以保持hover状态css

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

Answer 1

只用css 就可以了。

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

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将hover类添加到父菜单项：

 
 
Menu Item 1 
 
Sub-Menu Item 1
 
Sub-Menu Item 2
 
 
 
Menu Item 2
 
  

Answer 3

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

 
 Setting 
 ... 
  

然后这是CSS：

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