javascript - 可以在多嵌套的 css 菜单中突出显示路径吗？

Question

我使用 CSS(ul 和 li)结合 PHP 创建了一个四层菜单，从数据库中提取选项。它不是用于导航，而是允许用户过滤到一定程度的细节

示例:http://jsfiddle.net/7LFT5/

如果您选择路径“建筑物的一部分”>“外部”>“车库/车库”>“车库门”，您会发现用户很容易对他们选择的路径感到困惑。

我想用不同的颜色突出他们走过的路。在 CSS 中执行此操作是理想的——感觉应该是可能的，因为路径正在生成菜单项的可见性。我一直在玩弄下面的 css，希望 :hover 或 :active 会起作用——但还没有运气。

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:hover {

因为当鼠标悬停在 li

的全部内容时，你需要在 a 标签上保持高亮

对此:

nav.filter ul li:hover > a {

查看此演示 http://jsfiddle.net/7LFT5/1/

现在组合这两个选择器，您可以为事件项设置一种颜色，在悬停项上设置一种颜色，如下所示:

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