Here's how I would modify your code to do what you want. I haven't
checked it for syntax. Hopefully you have enough javascript knowledge
to know how to fix any syntax errors below.
<style>
dd { display: none };
</style>
<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>
<html>
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="#" class="menu" onmouseover="showMenu(this)">Menu</a></
dt>
<dd><a href="#">SubMenu 1</a></dd>
<dd><a href="#">SubMenu 2</a></dd>
<dd><a href="#">SubMenu 3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="#" class="menu" onmouseover="showMenu(this)">Menu 2</a></
dt>
<dd><a href="#">SubMenu 1</a></dd>
<dd><a href="#">SubMenu 2</a></dd>
<dd><a href="#">SubMenu 3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</html>
