Jquery menu with sub menu hover

Question

I have a menu and sub-menu system which is self explanatory, you hover over something in the main menu options and then you are presented with a sub menu of options.

There is a problem if you hover to see the main menu options, but then mouse away without selecting from the sub menu, the sub-menu doesn't slide up.

You can see it working here (I know the css is bloated but I have just copied the entire sheet in:

http://jsfiddle.net/6sres/

This is the Jquery I am using:

$('#nav li').hover(

     function () {
          //show its submenu
          $('ul', this).stop().slideDown(100);
     }, 

     function () {
          //hide its submenu
      $('ul', this).stop().slideUp(10);
     }

);

$('a#leagueSelect').hover(function(){

     $('ul.fixture-list').slideDown(50);        

});

I know it is something simple, perhaps related to the "this" which is causing some issues.

Thanks,

Alan.

Answer 1

You didn't make any function that handles the event when a#leagueSelect is not hovered anymore.

jsFiddle Demo

$('a#leagueSelect').hover(function(){
     $('ul.fixture-list').slideDown(50);        
},
function(){
     $('ul.fixture-list').slideUp(50);          
});