Jquery show div on hover then when user hovers out of div hide it help?

Question

I have a menu and when I hover one of the links a div shows. I want the user to be able to hover over this div but when the user hovers out of the div (mouseout i think its called) I want it to hide.

Imagine a dropdown menu in css, the user hovers over the link and the sub nav is shown, when the user hovers out or away from the link and sub nav the sub nav dissapears. How can this be done with jquery???

this is what I have:

 $(document).ready(function(){
 //when user hovers over plans the mainnavbottom is shown
$(".plans").hover(
    function() {
    $(".mainnavbottom").show("fast");
  }, function(){
    $(".mainnavbottom").mouseout.hide("slow");
  });


 });

Answer 1

Try

 $(document).ready(function(){
      //when user hovers over plans the mainnavbottom is shown
      $(".plans").mouseover(function() {
           $(".mainnavbottom").show("fast");
      }).mouseout(function(){
           $(".mainnavbottom").hide("slow");
      });    
 });

Answer 2

Try something like this:

$('.mainnavbottom').bind('mouseenter mouseleave', function(event) {
    switch(event.type) {
        case 'mouseenter':
           // when user enters the div
           $(".mainnavbottom").show("fast");
        break;
        case 'mouseleave':
          // leaves
          $(".mainnavbottom").hide("slow");
        break;
    }
});

This code works particulary good if you want to append a div that has e.g. ajax loaded content, but it should very well work with your css menu.

Hope this helps

Answer 3

What you describe is: show when mouse over the plans:

$('.plans').live('mouseover mouseenter', function()
    {
       $(".mainnavbottom").show("fast"); 
    });

then hide when mouse out on the mainnavbottom:

$('.mainnavbottom').live('mouseout mouseleave', function()
  {
     $(".mainnavbottom").hide("slow"); 
  });

SO, that is really two events on different things.