Drupal 菜单上的悬停问题

Question

我有一个菜单，当用户将鼠标悬停在菜单上时，会出现子菜单。只是，当您未将鼠标悬停在文本上时，子菜单会消失。

让我尝试用图像来表达清楚。
悬停文本时（应该如何）：
导致此结果

将鼠标悬停在文本附近的区域时：
导致此结果

更复杂的是，它只发生在 Safari en Chrome 中（我猜是 webkit 引擎）而且它并不总是这样做:)

我猜这是一个CSS问题，但有人知道在哪里看吗？

（哦，这是一个 Drupal 网站，所以我不知道它是否能正常运行...）

更新
HTML 如下所示：

Answer 1

有一些模块可以为您执行此操作，例如 Nice Menus。

子菜单可能不是 DOM 中父菜单的子菜单。可能是这样的：

<ul id="parent">
    <li>menu item</li>
</ul>
<ul id="submenu">
    <li>menu item</li>
</ul>

因此，当您将鼠标悬停在子菜单上时，会在父菜单上触发 mouseLeave/mouseOut 。
您可以通过多种方式解决这个问题。一种是重构 HTML，使子菜单位于父菜单中：

<ul id="parent">
    <li>menu item
        <ul id="submenu">
            <li>menu item</li>
        </ul>
    </li>
</ul>

或者在 JavaScript 中检测/保存悬停项目状态。为此，一种可能的方法是使用 jQuery 数据对象保存或添加一个类（例如“on”）到您悬停的菜单，并使用同级/子选择器来检测您是否位于子菜单中。如果您不在父菜单或子菜单中，请删除“on”类。

有很多方法可以做到这一点，无论是在 JavaScript/HTML/CSS 中还是使用 Drupal 模块。如果您仍然感到困惑，请显示一些代码。