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!