mega-menu using jQuery

I'm trying to create a "mega menu" using nested <ul> within a <li>. Usi开发者_JS百科ng jQuery (mouseover) on the parent <li>, I can make <ul class="sec1" and <ul class="sec2"> appear.

But the mouseout on li doesn't work because the drop down disappears as soon as you rollout of the parent <li>. How can I keep the drop down active if the mouse is over the parent <li> or either child <ul>?

HTML structure below.

<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>

thanks

---

If you are trying to build a suckerfish-style menu, you should try the hoverIntent plugin or better yet, use the Superfish plugin that has support for it.

Regards.

---

To prevent the mega menu from closing when you hover the descendant elements inside the parent li you should use the mousemove event. Here is the exmample that I created for you: https://jsfiddle.net/imalitavakoli/bpmyu1sb/2/

And you may also consider using this jQuery plugin and CSS framework: https://myflashlabs.github.io/24component-bars/

Here is also its mega menu example: https://myflashlabs.github.io/24component-bars/previews/nav-03.html

It helps you create responsive mega menu, header, sidebar, and footer with lots functionalities fast and easy, without any hassle... It's exactly what you want :)

You don't need to code it yourself all from the beginning when there's already a solution out there!