Discussion :

[pierrot10]

Bonjour,
J'ai un petit problème d'affichage et j'ai donc du mal a comprendre pourquoi?

Dans mon css j'ai ceci:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

li.active a {color:#ff2222}

Et mon code est ceci

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul>
  <li class="level1"> <a href="#" title="Accueil" >Accueil</a> </li>
  <li class="level1 active"> <a href="#" title="Chambres" >Chambres</a>
    <ul class="sub-menu">
      <li class="level2 active"> <a href="#" title="2 personnes" >2 personnes (1-4 et 14a)</a> </li>
      <li class="level2"> <a href="#" title="2-3 personnes" >2-3 personnes (11-12)</a> </li>
      <li class="level2"> <a href="#" title="4 personnes" >4 personnes (5 et 8 et 14b)</a> </li>
      <li class="last level2"> <a href="#" title="3 à 9 personnes" >3 à 9 personnes</a> </li>
    </ul>
  </li>
</ul>

Ce que je ne comprend, ce quand je clique sur "2 personnes", je devrais avoir "Chambre" et "2 personne" en rouge. Alors dans mon cas j'ai tout en rouge.

En fait, puisque "Chambre" à la classe active

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="level1 active">

Tous les <a> hérite du rouge, ce que je ne veux, et ce que je ne sais pas maitriser.

Pourvez-vous m'orienter

[sebhm]

pourquoi tu dis

ce quand je clique sur "2 personnes", je devrais avoir "Chambre" et "2 personne" en rouge

??

tu n'utilises pas la pseudo class active mais une classe active que tu definis toi meme.
C'est alors normal que la couleur soit héritée

[pierrot10]

Ben en fait, j'ai oublié de préciser un détail important.
Avant de cliqué sur "2 personne" le li est comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<li class="level2"> <a href="#" title="2 personnes" >2 personnes (1-4 et 14a)</a> </li>

Apres avoir cliqué sur deux personne, il devient ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="level2 active"> <a href="#" title="2 personnes" >2 personnes (1-4 et 14a)</a> </li>

En revanche tant qu'on clique sur un menu enfant le .active du level1 est visible.

les autres menu du level1 (je ne les ai pas mis), n'ont pas la classe .active, tant qu'on a pas cliqué sur un de ses menu enfant...

[sebhm]

tu as du javascript qui modifie ton menu ?

sinon, la classe active sur level1 se propage aux enfants

[pierrot10]

non, je n'ai pa de javascript.
Mais peut on faire pour que ca ne propoage pas?

[sebhm]

si tu n'as pas de javascript, comment est ajoutée la classe active lors du click ? le sais tu ?

ne parles tu pas alors de la pseudo class :active ?