[Résolu] CSS et soussous-menus déroulant

Bonjour à toutes et à tous,

Je fouille le web depuis 2 jours pour essayer de résoudre ce cas mais je n'arrive pas à mettre le doigt sur ce qui ne va pas :

J'ai repris un script qui permettait de faire un menu déroulant avec une base visible et des sous-menu qui déroulent sur un hover, le truc c'est j'ai besoin d'un sous-sous-menu, j'ai donc modifié un peu le code pour que ça fonctionne sous IE : impeccable. Par contre pas moyen de le faire fonctionner sous firefox, le sous-menu vient correctement mais le sous-sous-menu ne vient pas.

J'ai bien trouvé un autre tuto pour ça mais il colle des classes sur des div, sincèrement je préfère éviter les div sur un menu (mauvais souvenirs de ces trucs là).

Voici le CSS (j'ai comme le pressentiment que ma faute est sur la fin du fichier) :

#menuDeroulant
{
	background: #6A6458;
	width: 100%;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#menuDeroulant li
{
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}

#menuDeroulant .soussousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .soussousMenu li
{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .soussousMenu li a:link, #menuDeroulant .soussousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .soussousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}

#menuDeroulant li:hover ul.sousMenu,
#menuDeroulant .sousMenu li:hover ul.soussousMenu { display: block; }

Et voici le html (enfin un bout intéressant) :

<ul id="menuDeroulant">
  <li><a href="index.php">Accueil</a></li>
  <li><a href="#">Visible 1</a>
  <ul class="sousMenu">
    <li><a href="#">sousmenu1</a></li>
    <ul class="soussousMenu">
      <li><a href="#">soussousmenu1</a></li>
      <li><a href="">soussousmenu2</a></li>
    </ul>
  </ul>
  </li>
</ul>

...etcetc

En remerciant d'avance les courageux qui auront lu jusqu'au bout.
Modifié par Borknagarr (30 Apr 2009 - 20:54)

Petit ajout d'infos avant il y avait ça à la place des deux dernières lignes du CSS mais ça ne fonctionnait pas mieux :

#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant .sousMenu li:hover > .soussousMenu { display: block; }
Modifié par Borknagarr (30 Apr 2009 - 16:14)

Bonjour et bienvenue parmi nous

Sur la forme:

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.



Sur le fond:

1. Tenter un menu déroulant sur trois niveaux ou plus, c'est donner le bâton pour se faire battre.
2. Les menus déroulants, ça ne se fait pas en CSS uniquement. Il faut passer par du JavaScript pour obtenir un résultat décent (accessibilité au clavier, utilisabilité correcte).
3. La structure HTML de ton menu est fausse. Je te conseille de valider la page sur laquelle tu travailles avant toute chose lorsque tu es confronté à un problème de rendu.

Wops, milles excuses, j'ai terminé le message rapidement avant l'arrivée d'invité, du coup j'ai zappé le bouton code. C'est corrigé.

Je viens de soumettre mon doc à W3C et au milieu des ouat-mille avertissements effectivement il m'a annoncé qu'une balise était mal fermée... y'a pas plus bête comme erreur...

Je viens de modifier mon script de génération de code et ça fonctionne bien sous tous les navigateurs.

Donc milles excuses d'avoir soumis un problème si bête après être passé 15 fois sur l'erreur sans la voir et merci à Florent pour le coup de pouce.

Me sens con pour le coup là... :s

Heu ah oui sinon pour info je souhaite éviter au maximum le javascript, trop de gens le désactivent ces temps-ci, c'est bien dommage. Pour ça que je m'acharnais sur le CSS.

Je le passe ne clos. Encore merci.