I modified a script from dynamic drive for a menu reveal that i have. Below is the script / css / html. Right now the vertical menu stays open when you mouse out but closes when you mouse over another reveal menu. I was wondering if there was a way to delay the closing of the previous menu when you mouse over to another link. Any direction would be appreciated.

Code:
<html>
<head>
<script> 
var activeMenuParent = null; 
function setDisplay ( parent, display ) { 
 if ( ! parent ) return; // parent not set, do nothing 

 var els = parent.getElementsByTagName ( 'dd' ); 
 for ( var i = 0 ; i < els.length; i ++ ) 
   els[i].style.display = display; 

} 

function hideMenu ( parent ) { 
 setDisplay ( parent, 'none' ); 
} 

function showMenu ( link ) { 
 hideMenu ( activeMenuParent ); // hide menu if showing 
 var parent = link.parentNode.parentNode; // a, dt, dl 
 setDisplay ( parent, 'block' ); 
 this.activeMenuParent = parent; 
} 

</script> 
<style>
#menu ul {

	margin: 10px 0 0 0;
	padding: 0 15px 0 15px;
	
	}
#nav li {
width: 180px;
display:block;
list-style: none;
padding:0; 
margin:0 0 0 0; 
}
#nav li a, #nav li a:visited {
display:block; 
text-decoration:none;

}
#nav li dd {
display:none;
}
#nav li:hover, #nav li a:hover {
border:0;
}
#nav li:hover dd, #nav li a:hover dd {
display:block;
}
#nav li:hover dl, #nav li a:hover dl {
height:auto; 
}
#nav dl {
margin: 0; 
cursor:pointer;
}
#nav dt {
margin: 0 0 0 0px; 
padding: 0; 
border-bottom:1px solid #000000;
}
#nav dd {
margin:0; 
padding:0 0 0 15px; 
text-align:left; 
background-image: url(../images/splash/arrow.gif);
background-repeat: no-repeat;
background-position: 3&#37; .7em;

}
#nav li dt a:active, #nav li dt a:visited {
margin: 0 0 0px 0; 
color:#00000;
}



#nav2 li {
width: 180px;
display:block;
list-style: none;
padding:0; 
margin:0 0 0 0; 
text-align: right; 
}
#nav2 li a, #nav2 li a:visited {
display:block; 
text-decoration:none;

}


#nav2 li dd {
display:none;
text-align: right; 
padding: 0 15px 0;
background-image: url(../images/splash/arrow.gif);
background-repeat: no-repeat;
background-position: 3% .7em;

}
#nav2 li:hover, #nav2 li a:hover {
border:0;
}
#nav2 li:hover dd, #nav2 li a:hover dd {
display:block;
}
#nav2 li:hover dl, #nav2 li a:hover dl {
height:auto; 
}
#nav2 dl {
margin: 0; 
cursor:pointer;
}
#nav2 dt {
margin: 0 0 0 0px; 
padding: 0; 
border-bottom:1px solid #000000;
}
#nav2 dd {
margin:0; 
padding:0 0 0 15px; 
font-size: 1em; 
text-align:left; 
background-image: url(../images/splash/arrow_right.gif) !important;
background-repeat: no-repeat;
background-position: 97% .6em !important;
}
#nav2 li dt a:active, #nav2 li dt a:visited {
color:#00000;
}


.gallery dt a, .gallery dt a:visited {
display:block; 
color:#000000; 
padding: 5px 5px 5px 0; 
}
.gallery dt a:hover {
color:#993300; 
}

.gallery dd a, .gallery dd a:visited {
color:#000; 
text-decoration:none; 
display:block; 
padding:4px 5px 4px 0; 
}
.gallery dd a:hover {
color:#993300;
}

dt a, a:visted { 
color:#993300;
}

</style>
</head>

<body>
<ul id="nav">
<li>
<dl class="gallery">
	<dt onmouseover="showMenu(this)"><a href="#">Menu</a></dt>
	<dd><a href="#">Sub 1</a></dd>
	<dd><a href="#">Sub 2</a></dd>
	<dd><a href="#">Sub 3</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
	<dt onmouseover="showMenu(this)"><a href="#">Menu 2</a></dt>
	<dd><a href="#">Sub 1</a></dd>
	<dd><a href="#">Sub 2</a></dd>
	<dd><a href="#">Sub 3/a></dd>
</dl>
</li>
</ul>
</body>
</html>
Thanks!
Mike