Jquery mouseleave / mouseout和z-index

Question

我有这样的导航：

<ul>
   <li><a href='#'>Menu title 1</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
   <li><a href='#'>Menu title 2</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
...

然后使用jquery我为子菜单和淡入子菜单元素设置了悬停菜单项高度的z-index。因此，在子菜单上可以看到悬停的菜单项元素，所有其他菜单项都在子菜单下。

现在我需要为子菜单设置鼠标事件 - mouseleave =＆gt;隐藏子菜单。 问题：当菜单项现在超过子菜单时 - 如果鼠标停留在子菜单上但悬停菜单项1，则jquery将其理解为子菜单的鼠标左键

这对我来说是非常普遍的问题，我总是使用某种“作弊”，但我认为必须有一个简单的解决方案。

我没有提供完整的源代码，但我没有要求您提供有效的代码，我只是需要一些想法。希望得到帮助，thx。

Answer 1

使用pureCSS菜单，更有效，JS免费。您可以使用此编辑器在线生成pureCSS菜单。

http://purecssmenu.com/

此外，这是解释纯CSS菜单背后的基础知识的指南。

http://meyerweb.com/eric/css/edge/menus/demo.html

如果您需要带有效果的JQuery和CSS解决方案，本教程可以帮助您。

http://www.instantshift.com/2010/07/16/create-simple-dropdown-menu-using-jquery/

希望这有帮助。

Answer 2

这是使用纯CSS设置的一种方法：

http://jsfiddle.net/mblase75/nr8xZ/

诀窍是将:hover样式应用于仅在列表项悬停时显示它们的子菜单。由于子菜单也是父列表项的一部分，因此只要鼠标位于子菜单上，它就会一直显示。如果需要，您仍然可以为链接和/或列表项添加额外的jQuery / JavaScript交互。