javascript - 当鼠标退出 div 区域时自动折叠下拉导航

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

该方法是最初隐藏子菜单

ul ul { display: none }

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

li:hover ul { display: block }

如果您决定更改 HTML 结构，您可能需要继续适本地完善 CSS/图像，以使一切都到位。

可以在 A List Apart: Horizontal DropDowns 找到更详细地介绍此方法的好资源。 。可以在这篇关于 Creating a Pure CSS Dropdown Menu 的 CSS Wizardry 文章中找到更强大的示例(以及略有不同的方法)。