0

tt我有这样的导航：

<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 => 隐藏子菜单。问题：由于菜单项现在位于子菜单上 - 如果鼠标停留在子菜单上但悬停在菜单项 1 上，jquery 将其理解为子菜单的 mouseleave

这对我来说是很常见的问题，我总是使用某种“秘籍”，但我认为必须有一个简单的解决方案。

我不提供完整的源代码，但我不要求你提供工作代码，我只需要一些想法。希望得到帮助，谢谢。

在此处输入图像描述

4

2 回答 2

0

使用 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/

希望这可以帮助。

于 2012-08-22T18:47:37.370 回答
0

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

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

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

于 2012-08-22T18:53:22.023 回答