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

Question

我将放置在链接上时展开的简单下拉导航放在一起。

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

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

我非常感谢任何帮助。

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

感谢您的帮助@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 {显示：无}

当用户鼠标在主菜单的项目，使用：悬停选择器，以显示子菜单

李：悬停UL {显示：块}

如果您决定更改HTML结构，则可能需要继续适当地优化CSS /图像以适应所有应用。

进一步详细介绍此方法的好资源可在A List Apart: Horizontal DropDowns找到。一个更强大的例子（和稍微不同的方法）可以在这篇CSS Wizardry文章中找到：Creating a Pure CSS Dropdown Menu