Salve, volevo trovare una soluzione a questo mio problema...

praticamente questo codice semplice che sto realizzando per una pagina web che mi permette di ottenere dei menu a tendina sulla sinistra, (tralasciando il codice relativo ai css)
mi da problemi con internet explorer, mentre con firefox funziona perfettamente.

il problema è esattamente in questo punto
codice:
<div id="menu_3_sottomenu" class="sottoelemento" style="display:none">
<li id="menu_4">voce4
<li id="menu_5">voce5
</div>
l'id è utilizzato come identificatore del nome del menu (non per i css, ma serve a me), mentre la class sottoelemento è utilizzato per i css.


se al posto dei "div" della classe sottoelemento utilizzo uno span, funziona tutto correttamente anche su IE (anche se lo span non è fatto per contenere altri tag al suo interno).
Volevo sapere la soluzione migliore da poter adottare per realizzare il tutto in modo lineare e funzionante.
Grazie mille

Allego tutta la pagina qui di seguito, sempre senza codice css:

codice:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.:titolo:.</title>

<style type="text/css">@import url(stile.css);</style>

<script language="javascript" type="text/javascript">

function nodo(id)
{
	invertiElemento(id+'_sottomenu');
}

function invertiElemento(id)
{
	var l=document.getElementById(id);
	if(l.style.display=="none")
	{
		l.style.display="block";
	}
	else
	{
		l.style.display="none";
	}
}

</script>
</head>
<body>
<div id="contenitore">

<div id="testa"></div>
<hr/>
<div id="corpo">
<div id="menu">
<h2>Menu</h2>
<ul>
<li id="menu_1">voce1
<li id="menu_2">voce2
<li id="menu_3">voce3
<div id="menu_3_sottomenu" class="sottoelemento" style="display:none">
<li id="menu_4">voce4
<li id="menu_5">voce5

</div>[/list]
</div>
<hr/>

<div id="corpo2">
<h1>Titolo</h1>


prova

paragrafodi prova
</P>
</div>

</div>
<hr/>
<div id="bannerpiede"></div>
<div id="piede"></div>
</div>
</body>
</html>