javascript - 当子子菜单处于活动状态或悬停时保持锚点悬停状态

Question

我在菜单中有一个菜单。包含子菜单的第一个菜单锚（class = menu-container）具有悬停状态，并附加了样式。当鼠标也在子菜单上时，我希望父锚的这些样式保持活动状态。

我不能使用 jQuery，因为我只限于纯 javascript。

代码如下：

<ul>
    <li>
         <a href="#">List Item</a>
    </li>
    <li>
         <a class="menu-container" href="#">List Item</a>
         <ul class="submenu">
              <li>list item</li>
        </ul>
    </li>
</ul>

注意：客户端已请求使用纯 CSS 显示和隐藏菜单。我知道使用 jQuery 来实现这个解决方案会更容易，但我受到限制。

谢谢

Answer 1

“将菜单容器类附加到父“li”项...

li 上的 ":hover" 不能在 IE6 及以下版本中使用，但可以在所有现代浏览器中使用。