[resolu]Display block qui n'a pas l'air de marcher sous FF

bonjour,
le but étant de faire un menu déroulant sir IE et FF.
sur IE ça marche mais sur F, le menu ne veut pas dérouler lorsque je passe la souris sur le menu :

voici une partie de mon code XHTML

<div id="menu" style="margin-left:0px;"> 
					<ul class="niveau1"> 
						<li class="sousmenu , plop"><a href="lien">PHOTO</a></li>
							<ul class="niveau2"> 
								<li><a href="lien">BOITIERS NUMERIQUES</a></li>
									<ul class="niveau3"> 
										<li><a href="lien">REFLEX</a></li> 
										<li><a href="lien">BRIDGES</a></li> 
										<li><a href="lien">COMPACTS</a></li>
									</ul> 
							</ul> 

et le css

body {behavior: url(csshover.htc);} 
div#menu a {color:#000000} 
div#menu ul {padding: 0; margin:0px; background: black; text-align:center} 
div#menu li {background:#CCCCCC} 
div#menu li:hover {background: #EDD} 
div#menu li.sousmenu:hover {background: #EBB;} 
/* rajout couleure de fond */ 
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC} 
/* rajout pr pour flèche direction bas et couleur de fond*/ 
div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;} 

/* une petite bordure en top*/ 
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid} 

div#menu ul ul {position: absolute;display:none; width:153px} 
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:153px} 
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block;}
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;} 
div#menu ul.niveau3 {top:-1px; left: 153px;} 

/* rajout de couleures de fond et de survol */ 
div#menu ul.niveau3 li { background: #99CCCC} 
div#menu ul.niveau3 li:hover { background: #99CC00} 

Ca doit être le display block qui ne marche pas mais je n'arrive pas à savoir pourquoi.

merci d'avance pour votre aide.
Modifié par samb01 (02 Feb 2006 - 07:49)

Bonjour ,
Ta liste à plusieurs niveaux est mal rédigée. NOrmalement, il faut inclure une liste à l'intérieur d'une balise <li>, non pas après la fermeture de celle-ci comme tu le fais. Faire :

<ul>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

Sinon ça ne peut effectivement pas marcher puisque sur la <li> correspondant à "BOITIERS NUMERIQUES", sensée "ouvrir" la liste de niveau 3, il manque actuellement la classe ".sousmenu" pour que ça corresponde au sélecteur dans la css :

div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 

Ou alors modifier le sélecteur, ce qui ne serait pas plus mal.

En attendant , tu peux essayer avec ce code :

<div id="menu"> 
<ul class="niveau1"> 
	<li class="sousmenu plop"><a href="#">PHOTO</a>
		<ul class="niveau2"> 
			<li class="sousmenu"><a href="#">BOITIERS NUMERIQUES</a>
				<ul class="niveau3"> 
					<li><a href="#">REFLEX</a></li> 
					<li><a href="#">BRIDGES</a></li> 
					<li><a href="#">COMPACTS</a></li>
				</ul> 
			</li>
		</ul> 
	</li>
</ul>
</div>

Modifié par Alan (02 Feb 2006 - 06:56)

Merci, maintenant ça marche.