jQuery实现的Mega菜单

Question

我正在尝试使用嵌套的<ul>在<li>中创建“超级菜单”。使用jQuery (mouseover)在父<li>上，我可以使<ul class="sec1">和<ul class="sec2">出现。

但是，当你从父<li>移开时，li的mouseout不起作用，因为下拉菜单会立即消失。如何在鼠标悬停在父<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>

谢谢

- pixeltocode

---

你遇到了什么问题？使用的是哪个浏览器？我无法在http://jsfiddle.net/vMPRa/上重现此问题（菜单在任何子菜单上停留时保持打开状态）。 - Robert

谢谢。你的jQuery似乎很有效。我之前是使用分别的函数来显示和隐藏。我可以接受评论作为答案吗？ - pixeltocode

@Robert - 你想把你的JQuery发布为答案吗？ - pixeltocode

没问题，如果它能正常工作，那就可以了。 - Robert

Answer 1

如果你想构建一种suckerfish风格的菜单，你应该尝试使用hoverIntent插件，或者更好的选择是使用Superfish插件，它对此提供了支持。

祝好。

- xmarcos

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 它可以帮助您快速轻松地创建响应式的超级菜单、标题、侧边栏和页脚，并具有许多功能，无需任何麻烦... 这正是您想要的 :)

当已经有解决方案存在时，您不需要从头开始编写代码！

- Ali