Problème menu anarchique

Salut à tous,

Alors voilà j'ai un petit problème avec mon "menu anarchique".
Enffet mes sous menu n'apparraissent pas au bon endroit (Ils apparraissent tous en même endroit, entre le menu1 et 2), et ils sont " derière" mes menus ce qui fait que l'on ne l'est vois pas...


Voici mes codes :
=> CSS :

/* Le menu déroulant*/


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu_dynamique {
	position: absolute;
}
#menu_dynamique dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
#menu_dynamique dd {
position: absolute;
z-index: 150;
left: 8em;
margin-top: 10px;
width: 150px;
background: #A9BFCB;
border: 1px solid gray;
}
#menu_dynamique ul {
padding: 2px;
}
#menu_dynamique li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu_dynamique li a, #menu_dynamique dt a {
color: #000;
text-decoration: none;
display: block;
}
#menu_dynamique li a:hover {
text-decoration: underline;
}

#menu1,#menu2,#menu3,#menu4 {
position: absolute;
width: 10em;
z-index: 500;
}
#menu1 {
top: 2px;
left: 10px;
}
#menu2 {
top: 2px;
left: 180px;
}
#menu3 {
top: 2px;
left: 350px;
}
#menu4 {
top: 2px;
left: 520px;
}

=> Html :

	   <div id="menu_dynamique">
	<dl >
		<dt id="menu1" onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt> 
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
				</ul>
			</dd>	
			
		<dt id="menu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();" >Menu 2</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
				</ul>
			</dd>	

		<dt id="menu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt id="menu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
</dl>
	
</div>

Merci de votre aide!
Si vous voulez plus d'expliquation demandé mon, je sais que je m'exprime pas toujours très bien

Tu peux envoyer le javascript qui va avec histoire de tester tout ça ?

Salut,

Pas de problème le voilà :

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Merci