Question

I have a navigation menu that has submenus slide down on hover. The menu is structured like so:

<ul class='nav'>
  <li><a href='#'>About</a></li>
  <ul class='submenu'>
    <li><a href='#'>Stuff</a></li>
  </ul>
</ul>

etc..

What I did to create slideouts was the following:

$('ul.nav li').hover(function(){
  $el = $(this);
  $el.next('.submenu').slideToggle(); # they all have submenus, so this works for now
},function(){
  $el = $(this);
  $el.next('.submenu').slideToggle();
});

However, with this approach, the submenu collapses when you mouse off the main LI. I fixed this by removing the collapse on mouseout, and then created a mouseout event for the submenu (ie: when the mouse leaves the submenu, it collapses). However, in this setup, if you happen to mouse onto the main LI, then leave without mousing into the menu, the submenu stays open (obviously).

How should I approach this in a manner that will function properly and also allow me to make it degrade gracefully?

note: i also tried containing the ul inside the li (<li><a href>Stuff</a><ul class=’submenu’><li></li></ul>) but I need the submenu to hide behind the main LI image, and that wasn’t possible using z-index in that setup).

Answer 1

You should restructure your code a bit to be valid as well, like this:

<ul class='nav'>
  <li><a href='#'>About</a>
    <ul class='submenu'>
      <li><a href='#'>Stuff</a></li>
    </ul>
  </li>
</ul>

The bug with z-indexing you have with this I’m not understanding…you should add that or ask a new question specifically on it, because your HTML should be like this.

This lets you hover inside the same element…and a <ul> can’t be a child of a <ul> anyway, it’s invalid HTML (even though the browser will usually render it).

Then you can use jQuery like this:

$('ul.nav li').hover(function(){
  $(this).children('.submenu').stop(true, true).slideToggle();
});

You can give it a try here, the .stop() call addition is to prevent animation queue build-up.