Menu CSS héritage du rollover dans les sous rubriques

Bonjour
j'ai mis en place un menu en css avec des ul et des li basé sur superfish
ce menu horizontal contient 3 niveaux
lorsque je passe sur le niveau 0, j'ai un effet rollover qui change la couleur de fond du block et la couleur du texte.
lorsque je passe sur le niveau 0, puis sur le niveau 1, j'ai bien mon effet rollover sur mon niveau 1, mais je perds l'effet rollover de mon niveau 0.
Idem avec mon niveau 2, je perds le rollover de niv1 et niv0

j'aimerai savoir s'il y a un principe de base permettant de conserver le "cheminement" actif visuellement... si un exemple existe, je devrais pouvoir me débrouiller à l'adapter à mon cas...

merci de votre aide
Modifié par jp.bond (23 Apr 2015 - 11:29)

bon... j'ai beau essayer de décortiquer le code, je n'arrive pas à comprendre comment fonctionne l'héritage...

#menu>li {
    background: #dadada;
}

ok j'ai bien la couleur de fond du menu ci dessus...

#menu>li:hover {
    background: #999;
}

ok j'ai bien la couleur de fond qui change au survol pour le 1er niveau ci dessus

#menu li li:hover {
    background: #333;
    color: #fff;
}

ok j'ai bien la couleur de fond qui change au survol pour le 2e niveau ci dessus

MAIS POURQUOI ET COMMENT le niv 1 et le niv 2 restent "allumés" lorsque je sors du survol niv 1 et niv 2 pour survoler le niv 3 ?

moi j'ai un comportement comme celui là dans mon propre menu... snif...

J'arrive pas à comprendre l'héritage... désolé...

Ça serait un peu gros de parler d'héritage à ce niveau . C'est simplement que les <ul> sont imbriquées. À aucun moment tu ne sors des <li> que tu survoles donc le ":hover" reste appliqué.
En gros, tu survoles en permanence le parent qui contient les sous menus.

Exact

<ul id="menu">
  <li>
     <a href="truc.html">truc</a>
    <ul>
      <li>
        <a href="truc2.html">truc2</a>
      </li>
  </li>
</ul>

du coup si tu écris

#menu>li:hover {
  background: red;
}

le li de premier niveau sera aussi de couleur rouge lorsque tu survole le li de second niveau car tu restes toujours «dessus». Quand tu survoles un élément, tu survoles aussi tous ses parents.

Pour éviter cela il faut mettre le hover sur le a

#menu a {
  display: block;
}
#menu>li>a:hover {
  background: red;
}

Modifié par kustolovic (23 Apr 2015 - 13:42)

donc en gros, mon code :

/* niv 0 */
	#main-menu-mp li a {
		color: #FFF;
	}
/* niv 0 :hover */
	#main-menu-mp li a:hover {
		color: #000;
		background-color: #9c9e9f;
	}
/* niv 1 */
	#main-menu-mp li li a {
		color: #000;	
		background-color: rgba(156, 158, 159, 0.9); /* #9c9e9f */
	}
/* niv 1 :hover */
	#main-menu-mp li li a:hover {
		color: #FFF;	
		background-color: rgba(0, 0, 0, 0.6); /*#000*/
	}
/* niv 2 */
	#main-menu-mp li li li a {
		color: #000;	
		background-color: rgba(114, 115, 116, 0.95); /*#727374*/
	}
/* niv 2 :hover */
	#main-menu-mp li li li a:hover {
		color: #FFF;	
		background-color: rgba(0, 0, 0, 0.6); /*#000*/
	}

ne fonctionne pas justement parce que j'ai mis les effets sur le a au lieu de les mettre sur les li ?
Modifié par jp.bond (23 Apr 2015 - 15:48)