[Résolu] Problème d'affichage de sous-menu en CSS

Bonjour,

Je me suis très largement inspiré du modèle de menu déroulant en CSS présenté par Par Patrick Griffiths et Dan Webb sur pompage.net.
J'ai donc réalisé un menu à un niveau pour mon site et j'ai un problème pour la passage au menu à deux niveaux. Disons plutôt que ça marche très bien sur Internet Explorer mais que mon sous-menu (dons le second niveau) ne s'affiche pas sur Firefox.

Voici un exemple du problème (rubrique "Festival" puis sous-menu "Programmes de compétition") => www.lesnuitsmagiques.fr/index2.php

Pour mieux comprendre, voici ma feuille de style :

/*Le corps du menu*/

#nav, #nav ul {
	float: left;
	width: 800px;
	list-style: none;
	font-family: Verdana;
	background: black;
        font-size: 10pt;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

/*les rubriques principales du menu*/
#nav a.menu1 {
     display: block;
     width: 80px;
     w\idth: 79px;
     color: #FFFFFF;
     text-decoration: none;
     padding: 5 19px 5 19px;
     background: #CC0000;
}
#nav a.menu1:hover {
	background: #CC0000;
}
#nav a.smenu1 {
	display: block;
	w\idth: 250px;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
	padding: 2 2px 2 19px;
	background: #990000;
}
#nav a.smenu1:hover {
	background: #CC0000;
}

/*[...] je définis ensuite chaque rubriques du menu pour avoir une couleur par rubrique... et je vous passe donc ces longeurs de codes inutiles*/

#nav li {
	float: left;
	padding: 0;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 13em;
	w\idth: 9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -20px 0 0 250px;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: auto;
}

J'ai remué le problème dans tout les sens et je n'arrive pas à trouver mon erreur.
Merci pour votre aide

Michaël
Modifié par MichaelJ (22 Sep 2006 - 12:05)

Salut, Michaël, et bienvenue parmi nous!

Est-ce que, par hasard, même si ce point n'a rien à voir avec les CSS, ton code HTML ressemble à ça?

<ul>
  <li>Menu 1</li>
  <ul>
    <li>Sous-menu 1</li>
    <li>Sous-menu 2</li>
  </ul>
  <li>Menu 2</li>
...
</ul>

Si oui, tu as intérêt à laisser tomber car le validateur du W3C n'admet pas des listes imbriquées entre elles.

Pour ma part, à ta place, je coderais et "styliserais" ainsi:

<ul id=menu>
  <li>Menu 1</li>
  <li class="sous-menu">Sous-menu 1</li>
  <li class="sous-menu">Sous-menu 2</li>
  <li>Menu 2</li>
...
</ul>

#menu {
  font-size: 1em;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sous-menu {
  font-size: 0.8em;
  text-indent: 20px;
}

Merci pour cette réponse,

Je ne savais pas que le W3C n'admettait pas les listes imbriquées alors merci pour cette information.

Cela veut-il dire que l'on ne peut pas faire de menu déroulant à 2 niveaux en utilisant les standards du W3C ?

Car si j'ai bien compris ton conseil de codage je vais avoir un menu très long en hauteur et c'est pas très pratique pour l'internaute. J'aimerai bien conserver ce principe d'un menu qui se déroule et qui laisse apparaitre des sous-parties lorsqu'on le survolle.

Merci encore
Michaël

Salut,

Victor BRITO a écrit :
tu as intérêt à laisser tomber car le validateur du W3C n'admet pas des listes imbriquées entre elles.

Si, bien sûr qu'on peut le faire mais pas ainsi...

Il faut écrire :

<ul>
  <li>Menu 1
    <ul>
      <li>Sous-menu 1.1</li>
      <li>Sous-menu 1.2</li>
    </ul>
  </li>
  <li>Menu 2
    <ul>
      <li>Sous-menu 2.1</li>
      <li>Sous-menu 2.2</li>
    </ul>
  </li>
...
</ul>

Modifié par koala64 (22 Sep 2006 - 11:24)

C'est exactement le type de code que j'ai pour le moment et le second niveau de mon menu déroulant ne s'affiche pas sous Firefox, mais seulement sous Internet Explorer

merci

Pardon pour ma réponse précédente mais je viens de me rendre compte que je ne l'avais pas bien lu.

Je fermais mes balises <li> trop tôt

Mon problème est résolu

Merci à tous