Menu personnalisé

Bonjour a tous,

J'aimerais personnaliser un peu mon menu en y mettant des icons visible au survol, mais ne sais pas trop comment faire:

Voici mon menu actuel suivis de mes balises HTML et CSS

<ul id="navigation">
				<li id="active"><a href="#" id="current">Acceuil</a></li>
				<li><a href="#">Protections</a></li>
				<li><a href="#">Conseilles</a></li>
				<li><a href="#">OGM</a></li>
				<li><a href="#">Evenements</a></li>
				<li><a href="#">Actions</a></li>
				<li><a href="#">Médias</a></li>
				<li><a href="#">Membres</a></li>
				<li><a href="#">Ma traces</a></li>
			</ul>

sur le bouton "Accueil" j'aimerais mettre l'image ci dessous à la place de l'actuel de sorte à se quel soit distincte des autres item du menu.

ul#navigation {
background:url(images/menu_off.gif) repeat-x ;
margin: 0 ;
padding: 0 0 0 0;
list-style: none ;
height: 50px ;
}
ul#navigation li{
float: left ;
text-align: center ;}

ul#navigation a{
display: block ;
width: 100px ;
line-height: 50px ;
font-size: 1.1em ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
text-decoration: none ;}

ul#navigation li a:hover{
background: url(images/menu_on.gif) repeat-x 0 0 ;
}
ul#navigation li a:current{
background: url(images/menu_active.gif) repeat-x 0 0 ;
font-size: 2em;
padding-left: 30px;
} 

En suite j'aimerais faire en sorte qu'un icons apparaisse juste au deçu du bouton survolé et ceux pour chaque item.

Pourriez vous m'aider svp .

Merci a tous

Bonsoir,

worms30 a écrit :
sur le bouton "Accueil" j'aimerais mettre l'image ci dessous à la place de l'actuel de sorte à se quel soit distincte des autres item du menu

Tu as déjà le code HTML et l'image pour ça. Le problème vient de ton code CSS: tu utilises une pseudo-classe :current qui... n'existe pas. Il n'y a pas de pseudo-classe :current en CSS. Il faut que tu utilises, dans ton sélecteur, les identifiants que tu as placé dans ton code HTML: soit #active, soit #current (d'ailleurs un des deux est en trop ).

worms30 a écrit :
En suite j'aimerais faire en sorte qu'un icons apparaisse juste au deçu du bouton survolé et ceux pour chaque item.

Eh bien là aussi il faut travailler avec une image de fond, que tu peux appliquer au survol des liens avec la pseudo-classe :hover (et également la pseudo-classe :focus pour faciliter la navigation au clavier, tant qu'à faire). Attention: tu ne peux pas appliquer deux images de fond différentes au même élément, donc si ton image de fond pour l'élément «actif» est déjà appliquée à l'élément A, ça risque de poser problème.

Si tu utilises uniquement les images de fond sur les éléments A, il faut que tu prévoies les images (ou portions d'images) suivantes:
- état simple normal;
- état simple survolé;
- état «actif» normal;
- état «actif» survolé.