menu a tendina problematico

[black_electron]

ciao a tutti,
ho un grosso problema che proprio non riesco a risolvere...

ho questa pagina in xhtml strict e css2
www.settimane-musicali.com/scc/nuovo.htm

ho questo menu espandibile a 2 livelli funziona tutto bene con questo codicino

window.onload=mostra;
function mostra(id) {
var d = document.getElementById(id);
for (var i = 1; i<=100; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display= 'none';}
}
if (d) {d.style.display='block';}
}

con un piccolo ciclo for... tuttavia testandolo in giro tutti mi dicono che è brutto il fatto che uscendo ad esempio verso destra dal sottomenu questo non scompaia...non so però come raggirare il problema, ho provato in diversi modi... ma non so come creare una funzione decente che nasconda il sottomenu e sopratutto non cos a cosa applicarlo; al li del primo livello all'ul del sottomenu o al li sempre del sottomenu??

aiuto....!

questo è il frammento di codice relativo al menu

<div id="menusx">
<ul>
<li onmouseover="mostra();">Home Page

<li onmouseover="mostra('smenu1');">Il coro

<ul id="smenu1">
[*]I coristi
[*]Il maestro
[*]I musicisti
[*]L'amministrazione
[/list]



<li onmouseover="mostra();">Un po' di storia

...
[/list]
</div>


grazie a qualsiasi buon anima che sappia darmi una soluzione a questo dilemma...

ciao roro

[Mich_]

Dove c'e` un onomouseover, metti anche un onmouseout con:
onmouseout="mostra('');"

PS. Lo stesso menu si puo` realizzare con i CSS senza necessita` di JS - vedi nel forum CSS e XHTML (sotto HTML).