[Résolu] Changer la couleur d'un lien dans un li

Bonjour,
J'ai une liste avec des li qui comporte des liens

<ul>
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
	<li><a href="#">Menu 4</a></li>
</ul>

#navigation {background-color: rgba(192, 204, 0, 0.6);border-top: 1px solid #687A16;font-size: 18px;height: 64px;line-height: 64px;margin: 285px auto 0;text-align: center;width: 1200px;}
#navigation ul {list-style: none outside none;margin: 0;padding: 0;}
#navigation ul li {display: inline-block;padding: 0 10px;}
#navigation ul li:hover {background-color: rgba(0, 0, 0, 0.2);color:#000000;}
#navigation a {color: #FFFFFF;}

Mes liens sont par defaut blanc, quand je passe la souris sur le li le fond change mais pas la couleur du texte qui devrait devenir noir.

Merci de votre aide

Salut

Essaye un pti

color: black ;

au lieu de

 color:#000000;

Je pense avoir trouvé mais par hasard donc s'il y a mieux je suis a l'écoute.

#navigation {background-color: rgba(192, 204, 0, 0.6);border-top: 1px solid #687A16;font-size: 18px;height: 64px;line-height: 64px;margin: 285px auto 0;text-align: center;width: 1200px;}
#navigation ul {list-style: none outside none;margin: 0;padding: 0;}
#navigation ul li {display: inline-block;padding: 0 10px;}
#navigation ul li:hover {background-color: rgba(0, 0, 0, 0.2);}
#navigation ul li:hover a {color:#000000;}
#navigation a {color: #FFFFFF;}

Re,

Non ce n'est pas par hasard (enfin peut etre)

Mais dans ton premier exemple tu applique

#navigation ul li:hover {background-color: rgba(0, 0, 0, 0.2);color:#000000;}

donc tu change la couleur du LI, et le texte du LI. MAIS LE LI CONTIENT UN A HREF et pas du texte.

par contre dans ton deuxieme exemple

#navigation ul li:hover a {color:#000000;}

tu applique bien le changement de couleur sur le <a>

Hello,

C'est bien cela, il faut cibler directement le lien, l'élément "a" donc.

Dans le mesure du possible, je te conseille d'appliquer tes effets directement sur le lien en passant tes "li" en display: inline; et des "a' en display: inline-block.
Il te restera à appliquer les effets sur le "a" ainsi, et profiter de la possibilité de pouvoir ajouter un effet au focus :

#navigation {
   background-color: rgba(192, 204, 0, 0.6);
   border-top: 1px solid #687A16;
   font-size: 18px;
   line-height: 64px;
   margin: 285px auto 0;
   text-align: center;
   width: 1200px;
}
#navigation ul {
   list-style: none outside none;
   margin: 0;
   padding: 0;
}
#navigation li {
   display: inline;
}
#navigation a {
   display: inline-block;
   padding: 0 10px;
   color: #FFF;
}
#navigation a:hover,
#navigation a:focus {
   background-color: rgba(0, 0, 0, 0.2);
   color:#000000
}

Bon courage.

Merci beaucoup, c'est parfait surtout avec le a:focus