当子子菜单处于活动状态或悬停时，保持锚定悬停状态

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及以下版本中不起作用，但适用于所有现代浏览器。