CSS Menu (DIV and LINK conflict)

Here is an example of what I did...


Here is the source code for all the functions I used (JS):

function closeMenu(menu)
{
if (menu == menu1)
{
document.getElementById("menu1").style.visibility="hidden";
}
}
function showMenu(menu)
{
if (menu == menu1)
{
document.getElementById("menu1").style.visibility="visible";
}
}


Now I will create my menu (invisible):

<div style="visibility: hidden;" id="menu1" onMouseOut="closeMenu(menu1)">

<a href="#">menuItem</a><br>
<a href="#">menuItem</a><br>

</div>


That menu will be invisible until someone puts their mouse over this following link which will make it visible:

<a onMouseOver="showMenu(menu1)">menuItem</a>


And as you can see the hidden menu will show when the user's cursor goes over the link; the div will disapear when the mouse leave's the area. This code works very well with one exception: When a user puts their mouse over the LINKs in a menu div, for some reason it closes (becomes invisible).

Can anyone take a guess at why this is happening? All attempts appreciated.

Is this what you want to do:

Worked like a charm, kudos to you flatlander!