Menu déroulant CSS

Bonjour, j'essaie en vain de faire un joli menu pour mon site web. Quelqu'un connâitrait des sites qui expliquent comment faire un menu arborescent horizontal(avec un + pour dire s'il y a un sous menu, quand on clique dessus le sous menu se déplie verticalement et un moins sur le menu apparait et inversement).

Ma deuxième question aborde le css que j'ai réalisé pour mon menu actuel. Sous IE tout fonctionne: le menu se déplie bien dans son div approprié (ma page est décomposée en div: un div menu, un div principal situé sous le div menu)et les élements du div principal situés donc sous le menu descendent lorsque les sous menu sont dépliés. Sous firefox, ce n'est pas le cas.En effet le sous menu empiète sur le div de principal au lieu de le faire descendre et mon titre h1 dans le div principal est repoussé vers la droite quand les sous menus du menu sont apparents. Voici le code du menu (menu.php):

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="styles/menu2.css" />
<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>
<div id="menu">
	<dl>			
		<dt onclick="javascript:montre('smenu1');">Gestion des utilisateurs</dt>
			<dd id="smenu1" onclick="javascript:montre('smenu1');">
				<ul>
					<li><a href="admin.php?&page=gestion_user&type=visu_user">Visualisation des utilisateurs</a></li>

					<li><a href="admin.php?&page=gestion_user&type=rech_user&recherche=critere">Rechercher un utilisateur / Blocage d'un utilisateur</a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onclick="javascript:montre('smenu2');">Gestion des articles</dt>
			<dd id="smenu2" onclick="javascript:montre('smenu2');">
				<ul>
					<li><a href="admin.php?page=gestion_art&type=liste_art" title="LISTE DES DERNIERS ARTICLES PROPOSÉS">derniers articles proposés</a></li>

					<li><a href="admin.php?page=visu_art&type=liste_art&tri=par_clics" title="LISTE DE TOUS LES ARTICLES TRIÉS PAR POPULARITÉ">ARTICLES triés par vote</a></li>
					
					<li><a href="admin.php?page=gestion_categ_motcle&type=liste_categ&choix=nom_categ" title="GESTION DES CATÉGORIES DU SITE">Gestion des Catégories</a></li>							</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onclick="javascript:montre('smenu3');">Gestion des commentaires</dt>
			<dd id="smenu3" onclick="javascript:montre('smenu3');">

				<ul>
					<li><a href="admin.php?&page=gestion_comm&type=liste_comm_enattente" title="LISTE DES DERNIERS COMMENTAIRES PROPOSÉS">derniers commentaires proposés</a></li>								</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onclick="javascript:montre('smenu4');">Statistiques</dt>
			<dd id="smenu4" onclick="javascript:montre('smenu4');">			</dd>
	</dl>
</div>

Et le code du css menu2.css:

dl, dt, dd, ul, li {
 margin: 0;
 padding: 0;
 list-style-type: none;
}

#menu { 
	 clear:both;
	 z-index:100;
	 width: 730px;
	 margin-left:10px;
	 margin-top:30px;
	 margin-bottom:60px;
 }
 
#menu dl {
	 float:left;
	 width: 180px;
	 margin: 0 1px;
}

#menu dt {
	 cursor: pointer;
	 text-align: center;
	 color:#FFFFFF;
	 border: 2px solid #fff ;
	 margin-right:10px;
	 padding: 2px;
	 background: #c00 ;
}

#menu dd {
	 width: 170px;
}

#menu li {
	 text-align: center;
	 background: #fff;
}

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

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
	margin-top:15px;
} 

#smenu1 li, #smenu2 li, #smenu3 li, #smenu4 li, #smenu5 li, #smenu6 li {
	border: 2px solid #fff ;
	margin-top:5px;
	padding:2px;
	background: #c00 ;
}

#menu a {
	text-decoration: none;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	font-size:12px;
}

#menu a:hover {
	font-weight:bold;
	text-decoration:underline;
	background: #900 ;
}

Pouvez vous m'aider s'il vous plait. .. Merci de votre aide précieuse

Bonjour dolphin57100 et bienvenue sur la planète Alsacreations,

Je t'invite à consulter les tutoriels proposés sur le site, lesquels proposent des techniques pour la confection des menus déroulants.

D'autre part, il s'avère plus pratique de voir le problème en ligne que de l'imaginer au travers de longues explications peut-être un peu confuses.

Enfin, je te conseille également la lecture de cet article concernant les problèmes d'accessibilité des menus déroulants.

Modifié par Vero (21 Aug 2007 - 15:12)

Merci pour vos tutos, mais je suis déjà passé par eux pour pouvoir faire le menu, le fait est qu'il ne s'affiche pas correctement dans firefox.
Cordialement