[Résolu] Sous menu CSS

Bonjour à tous,

J'ai un petit soucis que je n'arrive pas à résoudre... J'ai créé un menu avec un sous menu qui apparaît lorsque je survol le bouton du menu correspondant. (jusque là tout va bien, mon bouton rouge devient blanc et l'écriture passe de noir à blanc), mais lorsque je descends sur le sous menu : le bouton reste blanc mais l'écriture elle, redevient blanc.

Je n'arrive pas à dire en CSS à appliquer une action à la couleur du bouton de menu en fonction du survol du sous menu... Je ne sais pas comment faire.

Le problème je pense est que je ne connait pas l'astuce CSS pour faire des conditions. J'avais lu par exemple le signe ">" mais c'est pour désigner un parent, alors ici je ne sais pas trop si c'est ce que je dois utiliser...

Je ne pense pas que ce soit un problème trop difficile pour ceux qui s'y connaissent. C'est pour ça que je me tourne vers vous.

-Voici mes codes HTML et CSS :

<ul id="menu_horizontal">
					<li <?php if($nom_page==1) { echo 'class="menu_selected"';} ?> ><a <?php if($nom_page!=1) { echo 'href="index.php"';} ?> >Accueil</a></li>
					<li <?php if($nom_page==2) { echo 'class="menu_selected"';} ?> ><a <?php if($nom_page!=2) { echo 'href="presentation.php"';} ?> >Présentation</a></li>
					<li <?php if($nom_page==3) { echo 'class="menu_selected"';} ?> ><a <?php if($nom_page!=3) { echo 'href="services.php"';} ?> >Services</a>
					
					<ul class="sous_menu">
<li><a href="accueil.php">Accueil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="livreor.php">Livre d'or</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="admin.php">Admin</a></li>
</ul>
					
					</li>
					<li><a href="#">Savoir Faire</a></li>
					<li><a href="#">Références</a></li>
					<li><a href="#">Partenaires</a></li>
					<li><a href="#">Contact</a></li>
				</ul>

ul#menu_horizontal li ul.sous_menu{
display:none;
margin-left:-40px;
margin-top:-6px;
}

ul#menu_horizontal li ul.sous_menu li{
background:rgba(250,250,250,0.7);
width:120px;
height:25px;
border-bottom:solid 1px black;
}

ul#menu_horizontal li ul.sous_menu li a{
color:black;
font-size:0.9em;
padding-top:4px;
}

ul#menu_horizontal li ul.sous_menu li a:hover{
color:white;
}

ul#menu_horizontal li a > ul#menu_horizontal li ul.sous_menu li:hover{
color:black;
}

ul#menu_horizontal li ul.sous_menu li:hover{
background:#d51212;
}

ul#menu_horizontal li:hover ul{
display:block;
}

ul#menu_horizontal{
	position: relative;
    height: 37px;
	width: 100%;
    padding-left: 2px;
	margin: 0;
    overflow: hidden;
	display:inline;
	}

ul#menu_horizontal li{
color:black;
float: left;
width:101px;
height:37px;
list-style-type:none;
text-align:center;
background:url(images/bt_menu2.png) no-repeat;

margin-right:3px;
}

ul#menu_horizontal li:hover, ul#menu_horizontal li.menu_selected{
background:url(images/bt_menuhover.png) no-repeat;
}

ul#menu_horizontal li a{
color:white;
text-decoration:none;
display:block;
padding-top:6px;
height:100%;
}

ul#menu_horizontal li a:hover, ul#menu_horizontal li.menu_selected a{
color:black;
}

Si jamais le problème ne vous parait pas claire je peux même vous mettre l'adresse de mon site, mais je ne sais plus si c'est bien vu ici. Ou en message privée s'il faut...

Merci beaucoup pour votre aide

Salut,
en effet tu peux mettre l'url de ton site, c'est plus simple pour résoudre les problèmes...

merci

Ok, j'ai mis un sous menu sur le bouton "Services"

http://www.benhays.fr/siteVGM/

Merci pour votre aide

Ajoute cette propriété:

ul#menu_horizontal li:hover a{
   color: #000;
}

Tu comprends ce que ça fait ou tu veux que je t'expliques?
Modifié par UltrAs001 (08 Nov 2012 - 16:13)

Haa ouiiiii Merci je n'avais pas du tout pensé à mettre ça. Oui je comprends la ligne de code "mettre la couleur noir à chaque lien lorsque le li est survolé" et comme le li reste comme survolé ça laisse le lien en noir.

Merci beaucoup, je cherchais vraiment trop compliqué !

Sujet résolu