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");
  });


 });