Tab menu - jquery mouseover/mouseout problem

Question

Hi, I am using the tab menu similar to http://yensdesign.com/tutorials/tabs/ but with hover instead of clicks. Currently i have to use 'default' to close the menus.

1. How can I start off with all the drop menu's closed?
2. When user hovers over the tabs the menu should expand and only close when user hovers out of the expanded menu.

Query used:

$(document).ready(function(){
 $(".menu > li").mouseover(function(e){
  switch(e.target.id){
   case "default":
    //change status & style menu
    $("#default").addClass("active");
    $("#elec_gas").removeClass("active");
    $("#home_energy").removeClass("active");
    //display selected division, hide others
    $("div.default").css("display", "none");
    $("div.elec_gas").css("display", "none");
    $("div.home_energy").css("display", "none");
   break;
   case "elec_gas":
    //change status & style menu
    $("#default").removeClass("active");
    $("#elec_gas").addClass("active");
    $("#home_energy").removeClass("active");
    //display selected division, hide others
    $("div.default").css("display", "none");
    $("div.elec_gas").fadeIn();
    $("div.home_energy").css("display", "none");
   break;
   }
  //alert(e.target.id);
  return false;
 });
});

Answer 1

To start with them closed, give the child menus a CSS of display: none; or do it in script, by adding this in your document.ready handler:

$("div.default, div.elec_gas, div.home_energy").hide();

---

For the hover-out of a cild closing them...use the mouseleave event instead of mouseout, like this:

$(".menu > li").mouseleave(function(e){

From the .mouseleave() docs:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.