css - 悬停时的 CSS 子菜单在子菜单元素上更改颜色

Question

我尝试使用来自 lwis.net 的一些代码为我的网站创建一个基于 CSS 的菜单（我只使用一个小片段）

菜单代码在这里：http: //jsfiddle.net/hCwZ2/

我喜欢做的是将鼠标悬停在子级菜单项上以将颜色更改为黑色。但是我所做的是，当我将子元素悬停以使子元素的元素也变黑时。

我怎样才能只让鼠标悬停在巫婆上的项目变黑？

IE：

在“服务”>“网页设计”上：悬停一切都很好。在“服务”>“印刷设计”上：悬停出现错误，因为“服务”>“印刷设计”>“名片和服务”>“印刷设计”>“传单”也是黑色的。

我需要它们是黑色的，只需要单独悬停每个。

注意：我只需要子菜单的项目在悬停时改变颜色。顶级项目在悬停时必须为白色。

亲切的问候梅里亚诺斯尼科斯

Answer 1

您应该在“li a”元素上设置悬停或为子菜单 li 元素定义一个类：

替换这个：

#main_nav li:hover > ul li:hover a
 {
   color:#000;
 }

有了这个

#main_nav li > ul li a:hover
 {
   color:#000;
 }

Answer 2

添加CSS：

#main_nav li ul li:hover
{
    background-color: Red;
}