html - 如何实现不同类的CSS多级下拉菜单？

Question

我试图仅在 CSS 中实现多级下拉导航菜单，但有一小部分我似乎无法正常工作。

应该发生的是:

1) 当悬停在菜单项上时，应该使用不同的图像突出显示它(这很好用)。2) 当悬停在子菜单项上时，应突出显示父菜单项。

第 2 点工作正常，直到我在父菜单项上有一个类 .bottom(使用这个类是因为图像略有不同)。如果父菜单项具有 .bottom 类，则高亮不会发生。

可在此处查看演示:http://jsfiddle.net/cZFtW/2/

演示显示，当鼠标悬停在菜单 1 > 子菜单 3 > 子子菜单 X 上时，子菜单 3 会突出显示。但是，当鼠标悬停在菜单 2 > 子菜单 3 > 子子菜单 X 上时，没有突出显示。

任何人都可以看到我错过了什么吗？附带说明一下，这里没有不使用 Javascript 的真正原因，我只是希望尽可能由 CSS 处理所有内容(只需要支持 IE7+)。

Answer 1

TL;DR; version: this fiddle shows the answer.

---

我明白你的意思。我很确定你需要回答的样式，除了底部的样式之外，对所有样式都有效，纯粹是偶然出现的。 (我必须说，这是一个不错的选择)。我几乎可以肯定这一点，因为您的代码和文件名缺乏任何形式的一致性。有双码，有多余码，有缺图。

因此，我重写了您的标记和样式表，并按照上面提到的方式来到 fiddle 。

现在，它是如何工作的？

诀窍是将背景图像附加到列表项内的元素。在这种情况下，我选择了一个 anchor 元素，因为这是最有可能的。第一步是在悬停 anchor 时更改背景图像，这是基本的。

第二步是将鼠标悬停在子菜单上时再次更改背景。那时， anchor 元素不再悬停，但列表项悬停了。所以您仍然可以更改 anchor 元素的背景。

注意:在我的解决方案中，与您希望的略有不同:当您悬停箭头时，如果列表项已经更改，则为背景，而不是直到光标悬停在子菜单上。如果你想避免这种情况，那么你必须像你自己做的那样为每个子菜单添加一个额外的元素。但我认为这也很不错。