Salve a tutti,
vi allego il codice che sto preparando e che non riesco a far funzionare.

Dovrebbe rappresentare un classico menu a tendina che si apre quando il mouse ci passa sopra, e si chiude quando il mouse esce dalla tendina o dal pulsante soprastante che lo ha generato.

Purtroppo non riesco a far rimanere aperta la tendina, il punto critico nel codice è segnalato da un commento. Come risolvo questo problema?

Sto sviluppando il menu su Chrome e Explorer e la visualizzazione è leggermente diversa: la differenza è accettabile ma sarebbe meglio se fossero identici. Sugli altri browser si hanno problemi di compatibilità?

Grazie per eventuali risposte.

codice:
<html>
<head>
<style type='text/css'>
body{
	margin:0px;
}
.menu{
	background-color:black;
	width:100%;
	padding:5px;
}
.menu-parent{
	background-color:#555;
	padding:5px;
	width:150px;
	display:inline-block;
	text-align:center;
}
.menu-child{
	background-color:#aaa;
	padding:5px;
	position:absolute;
	display:none;
	top:-500px;
}
</style>
<script language='Javascript'>
function setMenuChildren(){
	var parentCounter=0;
	while(document.getElementById('menu-parent-'+(++parentCounter))!=undefined){
		if(document.getElementById('menu-child-'+(parentCounter))!=undefined){
			var child = document.getElementById('menu-child-'+(parentCounter));
			var parent= document.getElementById('menu-parent-'+(parentCounter));
			child.mouseIsOver=false;
			child.onmouseover = function(){
									this.mouseIsOver = true;
								}
			child.onmouseout = function(){
									this.mouseIsOver = false;
									this.style.display="none";
								}
			parent.onmouseover = function(){
									showChild(this);
								}
			parent.onmouseout = function(){
									hideChild(this);
								}
			child.style.top =parent.offsetTop +parent.offsetHeight;
			child.style.left=parent.offsetLeft;
			if(child.offsetWidth<parent.offsetWidth)
				child.style.width=parent.offsetWidth;
		}
	}

}

function showChild(elem){
	id=parseInt(elem.id.match(/\d+/));
	if(document.getElementById('menu-child-'+id)!=undefined){
		document.getElementById('menu-child-'+id).style.display="inline";
	}
}

function hideChild(elem){
	id=parseInt(elem.id.match(/\d+/));

/////////// il seguente controllo non sembra funzionare correttamente//////////////
	if(document.getElementById('menu-child-'+id)!=undefined){
		if(!(document.getElementById('menu-child-'+id).mouseIsOver)){
			document.getElementById('menu-child-'+id).style.display="none";
		}
	}
}

</script>
</head>

<body onload='setMenuChildren()'>

<div class='menu'>
	<span class='menu-parent' id='menu-parent-1'>parent</span>
	<span class='menu-parent' id='menu-parent-2'>parent 2</span>
	<span class='menu-parent' id='menu-parent-3'>parent</span>
</div>
 
<div class='menu-child' id='menu-child-2'>a
b
c
d
e</div>
<div class='menu-child' id='menu-child-3'>a
b
c</div>

</body>
</html>