Question

我正在尝试使用<ul>中的嵌套<li>创建“超级菜单”。在父<li>上使用jQuery（鼠标悬停），我可以显示<ul class="sec1"和<ul class="sec2">。

但li上的mouseout不起作用，因为只要您推出父<li>，下拉菜单就会消失。如果鼠标位于父级<li>或子级<ul>之上，如何保持下拉式处于活动状态？

下面的HTML结构。

<li>link
 <ul class="sec1">
  <li>sub-link1</li>
  ......
  <li>sub-link5</li>
 </ul>
 <ul class="sec2">
  <li>sub-link1</li>
  ......
  <li>sub-link5</li>
 </ul>
</li>

感谢

Answer 1

如果您正在尝试构建 suckerfish风格的菜单，您应该尝试使用hoverIntent plugin或更好的方法，使用支持它的Superfish plugin。

问候。

Answer 2

要将子元素悬停在父li内的后代元素时阻止大型菜单关闭，您应该使用mousemove事件。以下是我为您创建的例外情况： https://jsfiddle.net/imalitavakoli/bpmyu1sb/2/

你也可以考虑使用这个jQuery插件和CSS框架：https://myflashlabs.github.io/24component-bars/

这也是它的大型菜单示例： https://myflashlabs.github.io/24component-bars/previews/nav-03.html

它可以帮助您快速轻松地创建响应式大型菜单，标题，侧边栏和页脚，功能强大，没有任何麻烦......这正是您想要的：）

当你已经有解决方案时，你不需要从头开始自己编写代码！

使用jQuery的超级菜单

2 个答案: