我正在尝试在CSS中实现一个多级下拉导航菜单，但是有一小部分我似乎无法正常工作。
应该发生的事情是：
1）当鼠标悬停在菜单项上时，应使用不同的图像突出显示（这样可以正常工作）。 2）当鼠标悬停在子菜单项上时，应突出显示父菜单项。
第2点工作正常，直到我在父菜单项上有一个.bottom类（此类用作图像略有不同）。如果父菜单项具有类.bottom，则突出显示不会发生。
可以在此处查看此演示：http://jsfiddle.net/cZFtW/2/
该演示显示当鼠标悬停在菜单1上时>子菜单3＆gt;子子菜单X，子菜单3突出显示。但是，当鼠标悬停在菜单2上时>子菜单3＆gt;子子菜单X没有突出显示。
任何人都能看到我错过的东西吗？另外，在这里没有使用Javascript的真正原因，如果可能的话，我更愿意让它全部由CSS处理（只需要支持IE7 +）。
答案 0 :(得分：0)
TL; DR;版本：this fiddle显示答案。
我明白你的意思。而且我很确定你需要回答的样式，除了底部之外的所有样子都有效，这纯粹是偶然产生的。 （我必须说，这是一个很好的）。我几乎肯定这一点，因为你的代码和文件名缺乏任何形式的包含。有双重代码，有多余的代码，并且缺少图像。
因此我重写了你的标记和样式表，并且如上所述来到了小提琴。
现在，它是如何运作的？
诀窍是将背景图像附加到列表项内的元素。在这种情况下，我选择了一个锚元素，因为这是最有可能的。第一步是在悬停锚点时更改背景图像，这是基本的。
第二步是当您将鼠标悬停在子菜单上时再次更改背景。此时，锚元素不再悬停，但列表项是。所以你仍然可以改变锚元素的背景。
注意：在我的解决方案中，与您的愿望存在细微差别：当您将箭头悬停时，如果列表项已经更改而不是光标位于子菜单之前的背景。如果你想要防止这种情况，那么你必须像你自己一样为每个子菜单添加一个额外的元素。但我认为这也很不错。