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

Question

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

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

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

如果只将鼠标上的项目设为黑色，鼠标会悬停在它上面？

IE：

服务＆gt;网页设计：悬停的东西很好。 关于服务＆gt;打印设计：悬停的东西是错误的，因为服务＆gt; <打印设计>商业卡和服务＆gt; <打印设计>传单也是黑色。

我需要它们是黑色的，只是将它们分开悬停。

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

亲切的问候 Merianos Nikos

Answer 1

你应该将鼠标悬停在＆＃34; li a＆＃34;元素或定义子菜单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;
}