如何在mouseout上隐藏此下拉菜单

Question

我有一个dropdownmenu工作，如jsfiddle example here

所示

如何在mouseout上隐藏dropdownmenu？我添加了：

onmouseout="hidediv()";

到包含下拉菜单的div - 但是，当您单击显示下拉菜单的链接时 - 当您将鼠标移到下拉菜单上时，它会消失 - 有时。其他时候，当鼠标悬停在列表中的第一个项目时，它会挂起，但当您移动到列表中的第二个项目时 - 菜单将消失。我不明白，因为mouseout应该适用于整个div。

Answer 1

将onmouseout更改为onmouseleave。

来自MDN：

  

与mouseout相似，[mouseleave]的不同之处在于它不会冒泡   直到指针从其物理空间和物理空间移动时才被发送   其中一个后代。

Fiddle

Answer 2

菜单和按钮有两个完全独立的元素。将菜单列表ul#dvMenu设为ul下#navcontainer下的子项，如下所示：

<ul>
  <li></li>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

顺便说一句，你不需要有一个周围的div，你可以将所有这些样式直接应用到无序列表中。这样你就不会离开元素的上下文，从而避免意外的隐藏。另外，将onmouseout="hidemenu();"绑定到主<ul>。