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.
$(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>
thanks in advance.