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 am managed to make it work so on hover the drop down list will appear which is does but when you move to select one of the items from the drop down list the drop down list closes
any help to fix this would be great thanks.

Answer 1

When building the dropdown menus you have to make sure there are no gaps between the hover button and the sub-menu. If there’s a gap it will cause it to disappear because you’re mousing out of the top menu item before mousing into the sub menu. You could also add a slight delay so it doesn’t go away immediately.