javascript menu problem with IE

[WebDevGuy]

The code below works fine in Firefox. The way it works in IE is that when you hover over a main menu, the sub-menus pop out as expected. BUT when you move the mouse to a sub-menu, the sub-menus disappear.

Maybe it's working IE it's programmed but working the way I want it to in Firefox.

Either way, the way I want it to work is when mouse form main menu to sub-menu, the sub-menu stays out there until you mouse to another main menu, click on a sub-menu, click on another part of the page. This is the way I think most pop-out menus work.

How do you fix this to work in IE also?

<script type="text/javascript">
function showMenu(elmnt)   {
  document.getElementById(elmnt).style.display="block"
}
function showNoMenu(elmnt)   {
  document.getElementById(elmnt).style.display="none"
}
</script>
...
<ul>
	<li><a href="/">Home</a></li>
	<li><a href="#" onMouseOver="javascript:showMenu('subMenu');" onMouseOut="javascript:showNoMenu('subMenu');">Your Coverage</a>
	<ul ID="submenu">
		<li><a href="link1.php">link1</a></li>
		<li><a href="link2.php">link2</a></li>
		<li><a href="link3.php">link3</a></li>
	</ul>
	</li>
</ul>

[jimfraser]

Well, you have set the event handlers to watch the mouseover and mouseout of the <a> tag. Unfortunately, the <a> tag does not include the submenu, so when you mouse over the submenu, hey presto it disappears.

I would eliminate the <a> tag altogether and put the onmouseover and onmouseout handlers directly in the <li> tag, which DOES include the submenu and shouldn't have this problem.

<ul>
	<li><a href="/">Home</a></li>
	<li onmouseover="showMenu('subMenu');" onmouseout="showNoMenu('subMenu');">Your Coverage
	<ul ID="submenu">
		<li><a href="link1.php">link1</a></li>
		<li><a href="link2.php">link2</a></li>
		<li><a href="link3.php">link3</a></li>
	</ul>
	</li>
</ul>

[WebDevGuy]

works terrific - thanks