Menu et superposition de sous-menu

Bonjour,

et oui c encore moi et mon histoire de menu et sous menu depuis la derniere fois j'ai avancé un peu plus mais j'ai un petit soucis..... Mes sous menus doivent s'afficher au clic de la souris, pour l'instant il n'y a pas le code javascript, mes sous menus n'ont pas tous la meme largeur ils devraient donc se superposer et etre alignés à gauche du menu auquel ils appartiennent (px d'espace entre le menus)mais au lieu de ca tout est aligné ........
Voici ma page HTML

<div class="Menu">
<dl class="menu1">
	<dt><a href="#">Menu 1</a>
	<dd>
		<ul>
		<li><a href="#">menu 1</a></li>
		<li><a href="#">menu 2</a></li>
		</ul>
	</dt>
</dl>
<dl class="menu2">
	<dt><a href="#">Menu 2</a>
	<dd>
		<ul>
		<li><a href="#">menu 1</a></li>
		<li><a href="#">menu 2</a></li>
		</ul>
	</dt>
</dl>
</div>

voici ma feuille de style CSS

.Menu{
width: 605px;
background-color:#FFFFFF;
position:absolute;
left:0;
top:0;
}
dt,dl,dd,ul,li{
margin: 0;
padding:0;
list-style-type:none;
}

dl{
float:left;
margin-left:2px;
}
dt{
font-family:Arial, Helvetica, sans-serif;
font-size:12pt;
color:#FFFFFF;
text-align:center;
}
li{
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#FFFFFF;
text-align:left;
padding:0 0 0 10px;
}
/*--------------------------menu1-------------
.menu1{
width: 85px;
}
.menu1 dt{
width: 85px;
height:22px; 
background-color: #FF6600;
}
.menu1 dt a, .menu1 dt a:visited{
text-decoration: none;
display: block;
height:100%;
color:#FFFFFF;
}
.menu1 dt a:hover{
background-color: #FF9999;
color:#FFFFFF;
}
.menu1 ul{
width: 135px;
height:100px; 
background-color: #FF6600;
}
.menu1 li a, .menu1 li a:visited{
text-decoration: none;
display: block;
height:100%;
color:#FFFFFF;
}
.menu1 li a:hover{
color: #009933;
}
/*----------------------------menu2----------------
.menu2{
width: 85px;
}
.menu2 dt{
width: 85px;
height:22px; 
background-color: #FF9933;
}
.menu2 dt a, .menu2 dt a:visited{
text-decoration: none;
display: block;
height:100%;
color:#FFFFFF;
}
.menu2 dt a:hover{
background-color: #FFCC66;
color:#FFFFFF;
}
.menu2 ul{
width: 108px;
height:53px; 
background-color: #FF9933;
}
.menu2 li a, .menu2 li a:visited{
text-decoration: none;
display: block;
height:100%;
color:#FFFFFF;
}
.menu2 li a:hover{
color: #3366CC;
}

Voila j'espere que j'ai été à peu pres clair.......je sais qu'il existe la propriété "Z-index" pour definir le plan d'affichage j'ai essayer sur mes classes menu1 (Z-index=2) et menu2 (Z-index=1) mais ca n'a rien changé.........

Merci d'avance!!!!!!!!!