Tab menu - jquery mouseover/mouseout problem
<p>I am using the tab menu similar to <a href="http://yensdesign.com/tutorials/tabs/" rel="nofollow">http://yensdesign.com/tutorials/tabs/</a> but with hover instead of clicks. Currently i have to use 'default' to close the menus.</p>

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

<p>Query used: </p>

<pre><code>$(document).ready(function(){
 $(".menu &gt; li").mouseover(function(e){
  switch(e.target.id){
   case "default":
    //change status &amp; 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 &amp; 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;
 });
});
</code></pre>
