show/hide submenu

Hi,

I want to show a submenu when a link on the main menu has mouseover and then to hide when onmouseout. I have this working however, I want to be able to select from the submenu but obviously this is hidden when I move the cursor accross tot he submenu.

how do I keep this showing but then hide when the mouse is not on either the submenu or the relevant link?

function subMenu(show) {
if (show){
document.getElementById('sub_menu').style.display = 'block';
} else {
document.getElementById('sub_menu').style.display = 'none';
}
}

<divid="main_menu">
<a href="index.html">Home</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="main1.html" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">Blah</a>&nbsp;&nbsp; |&nbsp;&nbsp;
a href="main2.html">BlaH</a>&nbsp;&nbsp; |&nbsp;&nbsp;
</div>
<divid="sub_menu">
<a href="sub1.html">Roller</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="sub2.html">Pleated</a>&nbsp;&nbsp; |&nbsp;&nbsp;
</div>

Many thanks

Don't rely completely on javascript to make a drop down menu, as people won't see anythig if they don't have javascript support in their browser. I'd recommend a CSS based one instead, check http://htmldog.com/articles/suckerfish/dropdowns/, which uses a semantic markup (http://www.boagworld.com/technology/semantic_code_what_why_how/) too.

thanks but that isn't what I am looking for. I have already got an alternative for people who do now have javascript enabled.

I just want a straight forward way to get this working.