(CSS) diffréntes couleur pour liens menu

Nouveau WRInaute
Bonjour, je suis novice et j'ai besoin pour ce site : http://www.videoboutique.fr de personnaliser la couleur des liens du menu selon la page. En gros quand je passe ma souris sur CAD par exemple je voudrai que le mot "CAD" soit rose et ainsi de suite pour les autres avec une autre couleur ... et une fois que l'on est sur la page que la couleur reste comme actuellement sauf que là c'est jaune pour tous ...
Pour info je suis sous wordpress et c'est un thème que j'ai totalement modifié mais là je bloque :)

voici le css concerné (enfin je pense que cela ce passe par ici ^^)

Code:
/* The page Body */
body { color: #494949; }

/* Headings */
h1, h2, h3, h4, h5, h6 { color: #ed008c; }
h3, h4 { border-bottom: 1px solid #d6d6d6; }

/* Links */
a { color: #edbe00; }

/* Menu */
.menu a { color: #ccc; }
.menu ul li a:hover,
.menu ul li.current_page_item a,
.menu ul li.current_page_parent a,
.menu ul li.current_page_ancestor a,
.menu ul li.current-menu-item a,
.menu ul li.current-menu-ancestor a { color: #edbe00; }

.menu { background: transparent url('menu_bg.gif') repeat-x scroll center top; }

.nav > li > a, 
.nav > li > a:focus { background: transparent url('menu_separator.gif') no-repeat scroll left top; }
.nav > li:first-child > a { background: none; } 

.nav ul { border-top: 1px solid #494949; }
.nav ul li a { border-bottom: 1px solid #494949; background-color: #333; border-left: 1px solid #494949; border-right: 1px solid #494949; color: #bbb; text-shadow: 1px 0px 1px #000; }

.nav a:hover { background-color: transparent; }
.nav li:hover, .nav li.nav-hover,
.nav a:focus { background: transparent; }

.nav ul a:hover { background-color: #555; color: #edbe00 !important; }
.nav ul li:hover, .nav ul li.nav-hover,
.nav ul a:focus { background: #555; }
.nav li.current_page_item ul a,
.nav li.current_page_ancestor ul a,
.nav li.current_page_parent ul a,
.nav li.current-menu-item ul a,
.nav li.current-menu-ancestor ul a { color: #bbb !important; }
.nav li.current_page_item ul a:hover,
.nav li.current_page_ancestor ul a:hover,
.nav li.current_page_parent ul a:hover,
.nav li.current-menu-item ul a:hover,
.nav li.current-menu-ancestor ul a:hover { color: #edbe00 !important; }

Merci de votre aide ! :D

Anthony
 
WRInaute passionné
Soit tu charges une feuille CSS différente selon la page dans laquelle tu te trouves, soit tu met ton CSS dans ta page PHP et tu défini tes couleurs dans des variables qui se modifie selon $_GET['REQUEST_URI'] par exemple. Ou alors en javascript peut-être mais ça c'est une autre histoire
 
WRInaute passionné
Tu peu aussi interpréter avec php le script CSS et y glisser du code dedans.
Oui c'est le mieux je pense mais je n'ai jamais approfondi le sujet, je voulais le faire à un moment sur un site mais j'ai laissé tomber finalement. Je sais qu'ils le font sur www . e - consommables . fr, essaies de regarder leur code
 
WRInaute accro
Allez une piste, WP ajoute un identifiant unique à chaque item du menu, pour l'item CAD, c'est #page-item-11.
 
Discussions similaires
Haut