help with "folding menus"

help with "folding menus"

Hello, brand new to jquery. I'm sure what I'm asking is jquery 101, but I'm hoping someone can help me with this, it should be a quick one. 

I have a main menu that I want submenus to unfold or slide when I mouseover, then hide when the mouse is neither over them nor over the main menu. I almost have it working, except that when you transition from one item to the other in the submenu, the submenu hides, even though I've done the mouseover on the div that contains the items and not the items themselves. 

Here is the relevant bit of code:

$(document).ready(function() {
//alert('jquery is working on this page.');
$('#subMenu').hide(); // hide the element with chooseTec id, a p element containing a form would not work so I used a div element

$("#mainMenu").mouseover(
  function () {
$('#subMenu').fadeIn("slow");
  });
  
$("#subMenu").mouseout(   
  function () {
    $('#subMenu').fadeOut(400);
  });

});
</script>


</head>
<body>
<div id="mainMenu"><a href="#" title="">Main Menu</a></div>
<div id="subMenu">
<div class="nav">Primer submenu</div>
<div class="nav">Segundo submenu</div>
<div class="nav">Tercer submenu</div>
</div>

And you can see the problem in action here:  http://hapkidobcn.com/borrar.html

thanks in advance.
    • Topic Participants

    • alex