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

Question

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

应该发生的是：

1) 将鼠标悬停在菜单项上时，应使用不同的图像突出显示它（这很好用）。 2) 将鼠标悬停在子菜单项上时，应突出显示父菜单项。

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

可以在这里查看演示：http://jsfiddle.net/cZFtW/2/

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

谁能看到我错过了什么？附带说明一下，这里没有不使用 Javascript 的真正理由，如果可能的话，我只是希望它全部由 CSS 处理（只需要支持 IE7+）。

Answer 1

TL;DR;版本：this fiddle 显示答案。

---

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

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

现在，它是如何工作的？

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

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

注意：在我的解决方案中，与您希望的有所不同：当您将箭头悬停时，如果列表项已更改，则为背景，而不是直到光标位于子菜单上方。如果你想防止这种情况发生，那么你必须像你自己做的那样为每个子菜单添加一个额外的元素。不过我觉得这也挺好的。