Menu déroulant CSS IE/Firefox

Bonjour,

Je suis en train de construire un site pour une petite entreprise. J'ai crée un menu déroulant horizontal à deux niveaux en full CSS (pas de javascript, j'aimerais l'éviter).
Mon problème est que le second niveau ne s'affiche pas sous IE7 et je n'arrive pas à comprendre pourquoi...
J'ai cherché sur une multitude de sujets et de forums sans trouver la réponse à ma question.

Voici le code HTML de mon menu :

<div id="menunav">
  <ul> 
    <li class="rubrique"> <a href="#" title="#" class="first-rub">Accueil</a> 
      
    </li>
    <li class="rubrique"> <a href="#" title="#" class="first-rub">Logiciels</a> 
      <ul>
        <li class="rubrique"><a href="#" title="#" class="second-rub">rubrique 1</a></li>
        <li class="rubrique"><a href="#" title="#" class="second-rub">rubrique 2</a></li>
      </ul>
    </li>
    <li class="rubrique"> <a href="#" title="#" class="first-rub">Services</a> 
	  <ul>
         <li class="rubrique"><a href="#" title="#" class="second-rub">rubrique 1</a></li>
        <li class="rubrique"><a href="#" title="#" class="second-rub">rubrique 2</a></li>
       </ul>	
</li>
    <li class="rubrique"> <a href="#" title="#" class="first-rub">Entreprise</a> 
	  <ul>
         <li class="rubrique"><a href="#" title="#" class="second-rub">rubrique 1</a></li>
        <li class="rubrique"><a href="#" title="#" class="second-rub">rubrique 2</a></li>
       </ul>	
</li>
    <li class="rubrique"><a href="#" title="#" class="first-rub">Contact</a> </li>
    </ul>
  </div>

Rien d'exceptionnel jusque là.

Voici ma CSS du menu :

#menunav {
	
	background-image:url(menu.png);
	width: 1000px;
	height:50px;
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	z-index: 40;
	}

#menunav li {
	float: left;
	width: 99.9px !important;
	width: 100px;
	margin: 2;
	padding: 0;
	border: 0;
	line-height: 15px;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 1px;
	display: block;
	text-decoration: none;
	z-index: 40;
	}

ul, #menunav li, #menunav a {
	display: block;
	margin:0;
	padding:0;
	border:0;
}
	
li.rubrique>ul { left: 140px; } 


#menunav a {
	text-decoration: none;
	color:#fff;
	font-weight: bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	width: 100%;
	vertical-align: middle;
	}
	
#menunav li>a {
	width: auto;
	height: 35px;
	vertical-align: middle;
	}
	
	
li a.first-rub {
	background-image: 
	background-repeat: no-repeat;
	
}


li a.second-rub {
	font-size:1em;
	background-image: 
	background-repeat: no-repeat;
	/*background-color: #3366FF;*/
}

	
li.rubrique a:hover {
	background-image:
	background-repeat: no-repeat;
}
	
	
/*hovers with specificity*/

li a.first-rub:hover {
	color: #000000;
	background-image:
	background-repeat: no-repeat;
}
	
li.rubrique:hover { z-index: 10; }		
		
ul ul, li:hover ul ul {
	display: none;
}


li:hover ul, li:hover li:hover ul {
	display: block;
}		

/*ACTIVE*/
li.rubrique a:active {
	background-image:
	background-repeat: no-repeat;
}
	
li a.first-rub:active {
	color: #000000;
	background-image:
	background-repeat: no-repeat;
}

Voila, j'espère que l'un d'entre vous pourra m'aider à comprendre où est le problème par rapport à IE.

Merci d'avance !
Modifié par Ailis (26 Nov 2008 - 15:23)

Bonjour,

Déjà, tu as un problème de méthode. Vu que ces styles s'appliquent à ton menu et ne doivent pas s'appliquer à d'autres éléments, chaque sélecteur des styles CSS que tu mentionnes devrait contenir "#menunav" à un endroit ou un autre (plutôt au début).

Donc:

Pas bien: ul, #menunav li, #menunav a
Bien:     #menunav ul, #menunav li, #menunav a

Pas bien: li a.first-rub
Bien:     #menunav li a.first-rub

Etc.

Ensuite, et même si ça viendra après, le «je voudrais éviter JavaScript» est à priori une bêtise. Utiliser du JavaScript en surcouche te permettra de rendre ton menu accessible au clavier, d'en améliorer l'ergonomie, et éventuellement de le rendre compatible avec IE6 (pas moyen autrement, IE6 ne comprend pas la pseudo-classe :hover sur autre chose que les liens...). Ça ne sera pas la panacée (il faudrait dans l'idéal avoir une disposition différente du menu avec et sans JavaScript, la version sans JS n'étant pas un menu déroulant mais un menu simple simplifié ou complet), mais ça serait déjà bien.

Quant au problème de CSS avec IE7, eh bien je suis étonné que ça marche ailleurs. Tu utilises la propriété left pour les sous-menus, mais pas de propriété position, donc ça ne risque pas de marcher. J'ai un peu de mal à relire ton code, les sélecteurs et leur rôle n'étant pas très clair...