Small problem with mouseout function..
I have a drop down menu that activated when a mouse is over an <li> element. It shows a small drop down menu. With the same function (that shows shows the sub-menu) I have a function call. This function call will build a string variable of html, and uses html() to insert the variable information into the sub menu's html().
Then I have a 2nd function. This function will hide the menu, with mouseout(). The problem is, it will activate this function when I hover over an element and then when the mouse leaves the sub-menu hides. I only want the sub-menu to hide when the mouse leaves the div tag, and div tag only. I don't want the sub-menu to hide when a mouse is hover over an element (inside the sub-menu) and moves away.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zelda Dungeon Demo Site</title>
<script src="jquery.js" type="text/javascript"></script>
<!--Link Arrays -->
<script src="links.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".headernav").mouseover(function () {
$("#menu").html("");
getMenuContents(0, "menu"); //Adds html to the #menu
$("#menu").slideDown("slow");
});
$("#menu").mouseout(function () {
$("#menu").hide();
});
});
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
<ul>
<li class="headernav">Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
<div id="menu">
</div>
</body>
</html>