Question

I’m new to jQuery and I try something like this:

   <ul id="CatNavi">
  <li class="CatLevel1 SubMenue">Top Level 1
    <div class="sub">
      <ul>
         <li class="CatLevel2">Sub Level 1</li>
         <li class="CatLevel2">Sub Level 1</li>
      </ul>
    </div>
  </li>
</ul>

And the jquery looks like this:

   $(function() { 
 $("li.CatLevel1 a").hover(function() {
   $(this).next("div.sub").slideDown(500);
 },function() {
  $(this).next("div.sub").slideUp(200);
 });
});

It works fine. When I hover the Top Level 1 the div class=”sub” is shown but I can’t click the elements in this div because the hover state disappears.

What am I doing wrong?

Greetz
Ron

Answer 1

Your function should look like this:

$(function() { 
  $("#CatNavi li.CatLevel1").hover(function() {
    $(this).children("div.sub").slideDown(500);
  },function() {
    $(this).children("div.sub").slideUp(200);
  });
});

When you move off the <a> the mouseleave event fires…which is what the second handler in that .hover() handler is, hiding the siblings. mouseleave doesn’t fire when entering a child, so having the hover events on the <li> instead means they won’t fire when you enter the child <div>/<ul> elements.