Drupal 菜单上的悬停问题答案

【问题标题】：Hover problem on Drupal menuDrupal 菜单上的悬停问题
【发布时间】：2011-04-26 03:05:32
【问题描述】：

我有一个菜单，当用户悬停菜单时，会出现子菜单。只有当您不悬停文本时，子菜单才会消失。

让我试着用图片来表达清楚。
悬停文本时（应该如何）：
会导致这个

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

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

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

（哦，它是一个 Drupal 网站，所以我不知道它在播放...）

更新
这是 HTML 的样子：

【问题讨论】：

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

【讨论】：