Mega menus using jQuery

Question

I am trying to create a “mega menu” using a nested <ul>within <li>. Using jQuery (mouseover) in the parent <li>, I can do <ul class="sec1"and <ul class="sec2">.

But the mouse lidoesn’t work, because the drop-down menu disappears immediately after the parent is expanded <li>. How can I keep the dropdown active if the mouse is above the parent <li>or child <ul>?

The HTML structure is 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>

thank

Answer 1

suckerfish, hoverIntent plugin , Superfish, .

.

Answer 2

- - li, mousemove. , : https://jsfiddle.net/imalitavakoli/bpmyu1sb/2/

jQuery CSS: https://myflashlabs.imtqy.com/24component-bars/

-: https://myflashlabs.imtqy.com/24component-bars/previews/nav-03.html

, , , - ... , :)

, !