javascript - 维护一个CSS :hover effect for all items up a nested list chain

Question

所以，我的 DOM 看起来像这样:

<ul id="nav">
  <li><a>Hello</a></li>
  <li>
    <a>OuterMenu</a>
    <ul>
      <li><a>InnerMenu1</a>
        <ul><li><a>InnerMenu2</a></li><li><a>Item 1</a></li><li><a>Item 2</a></li></ul>
      </li>
    </ul>
  </li>
</ul>

看起来像这样:

+Hello              +OuterMenu
                    ----InnerMenu1--------------InnerMenu2
                    ----Other list item         Item 1
                                                Item 2

也就是说，第一个菜单是水平的，下一个菜单在第一个菜单的正下方，所有后续的内部菜单直接出现在右边[ see example here ].

这工作正常，但我需要每个外部菜单的悬停样式在每个内部菜单被选中时保持不变。当用户将鼠标悬停在 Item 1 上时，Item 1、InnerMenu 和 OuterMenu 应该突出显示，并且当用户离开整个菜单树，然后并且只有到那时 OuterMenu 才应该不​​再突出显示。有没有比尝试管理每个列表项上的 hover 和 mouseout 事件更好的方法？

我在这里寻找一个干净的实现。

Answer 1

查看 Stu Nicholls great css-only work关于这个问题。