onMouseout delay for div menu box?

I want to make my drop down box similar to the one seen at http://www.gamewearteamsports.com/

The menu links act as normal links but will drop down to a div box when a person hovers over the link. The box will appear when the person hovers it but SHOULD disappear once the person does not hover over the box anymore. So if the person hovers over another link, the box should disappear. I added a delay timeout to one of my div boxes and the box stays alive for a couple of seconds but then closes back up again even though I’m still hovering over it. Any ideas?

My js:

<script type="text/javascript">
function drop(which)
{
    document.getElementById("drop" + which).style.display = "block";
}
function undrop(which)
{
    document.getElementById("drop" + which).style.display = "none";
}


</script>

My menu links code:

<ul id="head1" style="width:940px;">
    <li><a href="#" onmouseover="drop(1)">Basketball</a></li>
   <li><a href="#" onmouseover="drop(2)" onmouseout="undrop(2)">Football</a></li>
    <li><a href="#" onmouseover="drop(3)" onmouseout="undrop(3)">Volleyball</a></li>
    <li><a href="#" onmouseover="drop(4)" onmouseout="undrop(4)">Soccer</a></li>
    <li><a href="#" onmouseover="drop(5)" onmouseout="undrop(5)">Baseball</a></li>
    <li><a href="#" onmouseover="drop(6)" onmouseout="undrop(6)">Hockey</a></li>
    <li><a href="#" onmouseover="drop(7)" onmouseout="undrop(7)">Training</a></li>

The code I have for the first link:

    <div id="drop1" onmouseout="setTimeout('undrop(\\'1\\')', 3000);" style="z-index:3000;">

There’s a table with content in it inside the div. There’s a </ul> tag that closes out the menu links.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.drop {
  width:300px;height:100px;font-Size:80px;background-Color:red;
}

/*]]>*/
</style>
<script type="text/javascript">
function drop(which){
  var obj=document.getElementById("drop" + which);
  obj.style.display = "block";
  clearTimeout(obj.to);
}

function undrop(which){
  var obj=document.getElementById("drop" + which);
  obj.to=setTimeout(function(){ obj.style.display = "none"; },500);
}


</script></head>

<body>
<ul id="head1" style="width:940px;">
    <li><a href="#" onmouseover="drop(1)">Basketball</a></li>
   <li><a href="#" onmouseover="drop(2)" onmouseout="undrop(2)">Football</a></li>
    <li><a href="#" onmouseover="drop(3)" onmouseout="undrop(3)">Volleyball</a></li>
    <li><a href="#" onmouseover="drop(4)" onmouseout="undrop(4)">Soccer</a></li>
    <li><a href="#" onmouseover="drop(5)" onmouseout="undrop(5)">Baseball</a></li>
    <li><a href="#" onmouseover="drop(6)" onmouseout="undrop(6)">Hockey</a></li>
    <li><a href="#" onmouseover="drop(7)" onmouseout="undrop(7)">Training</a></li>
 </ul>
<div class="drop" id="drop1" >Drop 1</div>
<div class="drop" id="drop2" >Drop 2</div>
<div class="drop" id="drop3" >Drop 3</div>
<div class="drop" id="drop4" >Drop 4</div>
<div class="drop" id="drop5" >Drop 5</div>
<div class="drop" id="drop6" >Drop 6</div>
<div class="drop" id="drop7" >Drop 7</div>
</body>

</html>
</body>

</html>

Didn’t work :frowning: I hovered outside the div box but the box didn’t close…

I’m using a jquery image slider right below the menu…not sure if it is preventing the div box from working properly. The image slider that I am using can be seen here.