Question

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

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

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

我非常感谢任何帮助。

------ ------- EDIT

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

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

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

Answer 1

不要让＃subnav1成为#nav的兄弟，你可以尝试将div＃subnav1作为嵌套列表;你的导航结构如下：

<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 /图像以适应所有内容。

上的CSS Wizardry文章中可以找到更强大的示例（以及略有不同的方法）