Petit problème Menu Déroulant Horizontal^^

Bonjour et merci beaucoup pour ce site avec lequel j'apprend beaucoup ^^
je ne suis qu'un humble débutant et j'ai pas mal appris grâce a vous !!

Voila, grâce au Tuto sur le menu horizontal j'ai pu créer un menu avec des image pour mon site, mais après quelques opérations d'adaptations (ou plutôt de comprendre bien comme il faut comment ça marche... ), je m'aperçois quand je teste le menu qu'il s'ouvre bien (ALLELOUIIA lol) il mais si je descend dans les sous menus ils se ferment tout seul au bout du 2eme...

Je pense que sa doit venir de mon Css mais je trouve pas...
A L'AIDEEE!!! lol

<style type="text/css" media="screen">
 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
	float:center;
	position: absolute;
	margin-top:1em;
	margin-left: 22em;
	white-space: nowrap;
	width: 100%;/* correction pour Opera */
	
}

#menu dl {
	float: left;
	width: 5em;
}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: transparent;
	border: 0px solid ;
	margin: 1px;
	
}

#menu dd {
	display: none;
	border: 0px solid ;
	
}

#menu li {
	text-align: left;
	background: transparent;
	font: 70% Arial, Helvetica, sans-serif;
	width: 10em;
	
}

#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: transparent;
	color:#FFFF00;
	
}

#site {
	position: absolute;
	z-index: auto;
	top : 100px;
	left : 10px;
	color: #000;
	background-color: transparent;
	padding: 10px;
	border: 0px solid; 
}

</style>