Question

I’m trying to create a “mega menu” using nested <ul> within a <li>. Using 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

Answer 1

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.