I'm trying to create a slick fade in/fade out effect when users hover over an unordered list menu by using jQuery.Thus far I can fade in the sub menu when users hover over a menu item containing sub items but I'm struggling to hide it.
The requirement is as follows - If the mouse is not over the sub menu items or it's parent - fade out the sub menu list.
I'm including a screen shot of my menu and the HTML markup, please suggest how can i hide the menu as per the requirement listed above:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$('#subList').css("display", "none");
$('#item3').mouseover(function () {
$('#subList').fadeIn('slow');
$('#subList').css("display", "block");
});
$('#subItem1').mouseover(function () {
$('#subList').css("display", "block");
});
$('#subItem2').mouseover(function () {
$('#subList').css("display", "block");
});
$("#subItem1").mouseleave(function () {
$("#subList").fadeOut("slow");
});
$('#subItem2').mouseleave(function () {
$('#subList').fadeOut("slow");
});
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="item4.htm">Menu Item 4</a></li>
<li><a href="#" id="item3">Menu Item3</a>
<ul id="subList">
<li id="subItem1"><a href="subItem1.htm">Sub Item 1</a></li>
<li id="subItem2"><a href="subItem2.htm">Sub Item 2</a></li>
</ul>
</li>
<li><a href="item2.htm">Menu Item 2</a></li>
<li><a href="item1.htm">Menu Item 1</a></li>
</ul>
</div>
</body>
</html>