onMouseout delay for div menu box?

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

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:

[CODE]<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>[/CODE]

My menu links code:

[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>[/CODE]

The code I have for the first link:

[CODE] <div id=”drop1″ onmouseout=”setTimeout(‘undrop(‘1′)’, 3000);” style=”z-index:3000;”>[/CODE]

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

Also in #JavaScript _↴