鼠标退出 div 区域时自动折叠下拉导航答案

【问题标题】：Collapsing drop-down nav automatically when mouse exits div area鼠标退出 div 区域时自动折叠下拉导航
【发布时间】：2011-06-07 16:58:05
【问题描述】：

我整理了一个简单的下拉导航，当您将鼠标悬停在链接上时会展开。

将鼠标悬停在链接上时，绝对定位的 div 将展开，显示子导航。我的问题是当鼠标离开导航区域时这个 div 不会自动折叠，这就是我需要做的。

我已将 onMouseover 命令添加到导航中的其他链接，激活时会折叠 div，但我真正需要的功能是当鼠标离开 div 区域时下拉 div 折叠。

非常感谢您对此提供的任何帮助。

--------编辑-------

感谢@Tuanderful 的帮助。我以一种不优雅（但有效）的方式解决了这个问题。

我只是在导航下方和上方的 div 中添加了带有关闭触发器的 onmouseover 事件。这样，当用户的光标离开下拉导航时，触发器会触发并且下拉菜单会自动关闭。

我同意纯 CSS 方法会是理想的，但由于此导航的一些其他复杂性，我不得不使用 Javascript 解决方案。

【问题讨论】：

【解决方案1】：

您可以尝试将 div#subnav1 设置为嵌套列表，而不是使 #subnav1 成为 #nav 的同级；您的导航结构如下所示：

<ul>
    <li>About</li>
    <li>Products
        <ul>
            <li>Booster</li>
            ....
        </ul>
    </li>
</ul>

然后您可以使用 CSS（而不是 javascript）来控制子导航的隐藏和显示。这可以通过 :hover 伪选择器来完成。

方法是最初隐藏子菜单

ul ul { 显示：无 }

当用户将鼠标悬停在主菜单项上时，使用 :hover 选择器显示子菜单

li:hover ul { display: block }

如果您决定更改 HTML 结构，您可能需要继续适当地优化您的 CSS/图像，以使一切到位。

可以在A List Apart: Horizontal DropDowns 找到更详细地介绍此方法的好资源。可以在Creating a Pure CSS Dropdown Menu上的这篇 CSS 巫术文章中找到一个更强大的示例（并且方法略有不同）

【讨论】：

我最初考虑使用此模型，但由于一些设计元素难以样式化，我选择了当前的下拉解决方案。我真的不想为了解决这个问题而重建整个导航。有没有办法破解这个问题，以便下拉 div 在鼠标移出时关闭？
编辑了我原来的问题以包含上面的答案。