Question

I am trying to create a drop down list. I have it working but not fully, using this code:

$(document).ready(function(){
   $("#zone-bar li em").hover(function() {
       var hidden = $(this).parents("li").children("ul").is(":hidden");

       $("#zone-bar>ul>li>ul").hide()        
       $("#zone-bar>ul>li>a").removeClass();

       if (hidden) {
           $(this).parents("li").children("ul").toggle()
                  .parents("li").children("a").addClass("zoneCur");
       } 
   });
});

I managed to make it work so on hover the drop down list will appear, but when you move to select one of the items from the drop down list the drop down list closes. How do I fix that?

It works if I put it to onclick but then you have to click the arrow to close it again. You can see a live example at http://doctorwhohd.com (currently using onclick)

Answer 1

Try putting the hover on

  #zone-bar li  

and not on the em

Update, yes, you would need to modify the script:

$("#zone-bar li").hover(function() {
   var hidden = $(this).children("ul").is(":hidden");

   $("#zone-bar>ul>li>ul").hide()        
   $("#zone-bar>ul>li>a").removeClass();

   if (hidden) {
       $(this).children("ul").toggle()
              .children("a").addClass("zoneCur");
   } 

});

However, the suggestion of using mouseenter is probably superior, it seems that this causes momentary flicker.

You might want to consider doing this with pure CSS, there is no obvious reason to employ jquery to create this effect.

#zone-bar li{ height:1em; overflow:hidden}; 
#zone-bar li:hover{ height:auto};