可以突出显示许多nested CSS菜单中的路径

Question

我已经使用CSS（UL和LI）与PHP结合了一个四层菜单，该菜单将选项从数据库中提取出来。它不是用于导航，而是允许用户过滤到一定级别的细节

示例：http：//jsfiddle.net/7lft5/

如果您采用"构建的一部分">"外部">"车库/汽车端口">"车库门"的路径，您会发现用户很容易对他们采用的路径感到困惑。<<<<<<<<<<

我想突出他们采用不同颜色的道路。在CSS中这样做是理想的选择 - 因为路径正在生成菜单项的可见性，这是可能的。我一直在下面与CSS一起玩，希望悬停或：活跃会起作用 - 但还没有运气。

nav.filter li ul li ul li:hover ul {
    display: block;
    width: 150px;
    padding: 0px;
    left: 170px;
    top: 0px;
    /* margin: 0px; */
    z-index: 3;
}

有人在此之前做过吗？

Answer 1

您需要更改此选择器：

nav.filter ul li a：悬停{

因为当将li

的全部内容悬停时，您需要将亮点保留在a标签上

：

nav.filter ul li：悬停> a {

检查此演示http://jsfiddle.net/7lft5/1/

现在结合两个选择器，您可以拥有一种颜色的活动，而在悬停项目上可以使用一种颜色：

http://jsfiddle.net/7lft5/3/