Small problem with mouseout function..

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.

  1. <!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>