Menu CSS + sous-menus => XHTML VALIDE

Bonjour à tous,

celà fait prés de 2 mois que je cherche une solution à mon problème alors je m'en remet à vous.. le voici:

sur le site suivant: http*://www.ready2move.be, j'ai refais tout mon code afin d'être valide en XHTML (enfin presque). J'ai donc fait un menu avec le système des "portes coulissantes", Mais je souhaiterais également ajouter un sous-menu à chaque élément du menu et c'est là-dessus que je bloque...

je souhaiterais que les sous-menus soient positionnés de façon relative à l'élément "parent" (juste en dessous même si on agrandit la taille des caractères -> décalage) mais tout en étant superposé au reste du site (donc sans décaler le contenu du site vers le bas). Mieux que des mots, voici en image : http://www.ready2move.be/menu-test.jpg

CSS du menu:

/** BEGIN MENU **/
#menu{
	float:left;
	width: 100%;
	margin: 15px 0 0 0;
	line-height:normal;
	background:transparent url('../images/header_line.gif') repeat-x bottom;
}
#menu ul{
	margin:0 0 0 130px;
	padding:0;
	list-style: none;
}
#menu li{
	display:inline;
	margin: 0;
}

#menu a{
	float:left;
	background:url('../images/header_mg.gif') no-repeat 0% 0%;
	padding:0 0 0 10px;
	margin:0;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
	font-weight:bold;
	color: #d2ff00;
}
#menu a span{
	float:left;
	display:block;
	background:url('../images/header_md.gif') no-repeat 100% 0%;
	background-position:100% 1%;
	text-transform:uppercase;
	padding:5px 9px 4px 0;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span{float:none;}
/* End IE5-Mac hack */
#menu #current a{
	background-position:0 -400px;
	border-width:0;
	border-bottom: 5px solid #fff;
}
#menu #current a span{
	background-position:100% -400px;
	padding: 5px 10px 2px 0px;
	color:#000;
}
#menu a:hover{
	background-position:0% -200px;
}
#menu a:hover span {
	color:#fff;
	background-position:100% -200px;
}
#menuline{
	clear: both;
	padding: 0;
	width: 100%;
	height: 0px;
	line-height: 0px;
	background: #fb58b8;
}
/** END MENU **/

HTML:

<div id="menu">
<ul>
<li><a href="{RACINE}" title=""><span>{L_INDEX}</span></a></li>
<li><a href="{RACINE}clubbing/" title=""><span>{L_CLUBBING}</span></a></li>
<li><a href="{RACINE}music/" title=""><span>{L_MUSIC}</span></a></li>
<li><a href="{RACINE}pics/" title=""><span>{L_PIX}</span></a></li>
<li><a href="{RACINE}members/" title=""><span>{L_MEMBERS}</span></a></li>
<!-- BEGIN SHOW_FORUM -->
<li><a href="{RACINE}forum/" title=""><span>{L_FORUM}</span></a></li>
<!-- END SHOW_FORUM -->
<li><a href="{RACINE}e-shop/" title=""><span>{L_ESHOP}</span></a></li>
<li><a href="{RACINE}xtra/" title=""><span>{L_XTRAS}</span></a></li>
</ul>
</div>

Merci pour votre aide et vos propositions