[Résolu] Menus deroulant se superpose

Bonjour à tous
Voilà mon problème: j'ai 5 menus déroulants fait avec des <ul> et <li>.
Les 3 premiers s'affichent sur la première ligne et les 2 suivants en dessous. Lorsque je déroule un des menus de la première ligne, les menus d'en dessous passent par dessus ce dernier.
Voici le html:

<div id="content">
		<form class="filter-box">
				<div class="choose-theme"> <span>Choisir</span>
						<ul>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
						</ul>
				</div>
				<div class="choose-theme"> <span>Choisir</span>
						<ul>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
						</ul>
				</div>
				<div class="choose-theme" style="margin-right: 0"> <span>Choisir</span>
						<ul>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
						</ul>
				</div>
				<div class="choose-theme"> <span>Choisir</span>
						<ul>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
						</ul>
				</div>
				<div class="choose-theme"> <span>Choisir</span>
						<ul>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
								<li>Intitulé 1</li>
						</ul>
				</div>
				<input type="button" class=" btn" value="LANCER LA RECHERCHE" />
				<div class="clear"></div>
		</form>
</div>

...et le CSS:

#content { width: 600px;}
/* REFERENCES*/
.filter-box { background: #F1F1F1; padding: 15px 15px 7px 15px; margin-bottom: 30px;}
.filter-box .btn { width: 176px; font-family: special}
/* MENU ROLL OVER */
 .choose-theme, .choose-theme li{ margin: 0; padding: 0; list-style-type: none;}
.choose-theme { position: relative; background: #FFF; z-index: 100; margin: 0 15px 8px 0;float: left; width: 176px; cursor: pointer }
.choose-theme span { display: block; padding: 4px; background: #999}
.choose-theme ul { max-height: 300px; overflow: auto;display: none; margin: 0; padding: 0; position: absolute; left: 0; top: 18px; background: #FFF; border: 1px solid #CCC; width: 100%; z-index: 101 }
.choose-theme:hover ul { display: block; } 
.choose-theme li{border-bottom:1px dotted #CCC;}
.choose-theme a { display: block; padding: 2px; color: #333;}
.choose-theme a:hover { background-color: #ccc;}

Est ce que j'ai oublié quelque chose pour que ces menus ne se superposent pas ou est ce que la science n'a pas solutionné ce problème.

Merci d'avance,
Eurz
Modifié par eurz (06 Jan 2012 - 11:47)

salut,

je crois que ton souci se situe au niveau des z-index.
supprimes ceux que tu as mis, assignes un identifiant différent à chaque ul et donne leur des z-index adéquats (indice inférieur pour celui qui est en dessous de l'autre) et ça devrait aller.
Modifié par o06 (06 Jan 2012 - 10:57)

Merci oO6

Ca marche impeccable. Depuis le temps que j'étais confronté à ce problème