html - CSS - 如何通过简单的方式使用多级菜单

Question

我有一个多级菜单看起来像

我要我的菜单

• 具有相同的背景（如您所见#5b740d）
• 具有相同的活动背景（如您所见为红色）
• 具有相同的悬停背景（如您所见为红色）

以上三个选项适用于所有菜单和子菜单
但我的代码看起来很复杂。这是我的悬停示例代码

/* hover: can using a simple selector to make all are same background */
.menu li:hover {
    background: red;
}
.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

我在互联网上获得了css，但它很复杂，然后我用我的方式更改它（但它仍然很复杂:(请帮助我让它变得简单）。
但我得到了错误：当我将项目（2）悬停在我的图片中，然后项目(3)被悬停？

请简化我的css代码以执行上述三个选项（我不懂复杂的代码:(）并帮助我修复我的错误谢谢。

这是我的代码http://jsfiddle.net/SWF6w/

Answer 1

没有办法让它更“简单”，该代码中几乎没有多余的标记或定义，所以我真的不明白你想让它更简单的呼吁。

不过，您可以通过在选择器上指定直接后代选择器来轻松修复子元素上的红色悬停li:hover a。例如：

.menu li ul li:hover > a {
    background: red;
}

会产生这个结果 > http://jsfiddle.net/SWF6w/1/

Answer 2

替换这段代码：

.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

有了这个：

.menu li li ul li>a:hover {
    background: red;
}
.menu li ul li:hover>a {
    background: red;
}

这里是更新的 jsFiddle：http: //jsfiddle.net/SWF6w/2/