html - 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 模块。如果您仍然感到困惑，请显示一些代码。