http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-s­imples-en-CSS.html
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Bonjour,

Merci beaucoup de ta réponse rapide, mais par contre, mon menu comporte 6 liens, mais le première image du premier lien n'est pas la même que les 5 autres saurait tu connais je pourrais faire?

Voici mon code

HTML :

<div id="navigation">
<ul class="font_menu">
<li><a href="#">TEST</a></li>
<li><a href="#">Accueil</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>

CSS :

#navigation ul{
list-style: none;
padding: 0;
margin: 0;
}

#navigation li{
float: left;
margin: 0;
padding: 0;
}

#navigation li a
{
background: url(../Images/menu_2.gif);
height:63px;
width: 125px;
float: left;
display: block;
text-decoration: none;
color:#FFFFFF;
text-align:center;
}
#navigation li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
.font_menu{
font-family:Arial, Helvetica, sans-serif;

}

ESSAYE avec ca et tu adapte !!

<div id="navigation">
<ul class="font_menu">
 <li><a id="lien1" href="#">lien1</a></li> 
   <li><a id="lien2" href="#">lien2</a></li> 
   <li><a id="lien3" href="#">lien3</a></li> 
   <li><a id="lien4" href="#">lien4</a></li> 
   <li><a id="lien5" href="#">lien5</a></li> 
  <li><a id="lien6" href="#">lien6</a></li> 
</ul>
</div> 

#navigation ul{
list-style: none;
padding: 0;
margin: 0;
}

#navigation li{
float: left;
margin: 0;
padding: 0;
}

#navigation li a
{
height:63px;
width: 125px;
float: left;
display: block;
text-decoration: none;
color:#FFFFFF;
text-align:center;
}
#navigation li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
.font_menu{
font-family:Arial, Helvetica, sans-serif;

}

a#lien1{
background-image: url(c1.jpg);

}
a#lien1:hover{
background-image: url(c2.jpg); 
}

a#lien2{
background-image: url(h1.jpg); 

}
a#lien2:hover{
background-image: url(h2.jpg);
}
a#lien3{
background-image: url(m1.jpg); 
height: 32px;
}
a#lien3:hover{
background-image: url(m2.jpg);
}
a#lien4{
background-image: url(b1.jpg); 

}
a#lien4:hover{
background-image: url(b2.jpg);
}
a#lien5{
background-image: url(j1.jpg); 

}
a#lien5:hover{
background-image: url(j2.jpg);
}

a#lien6{
background-image: url(p1.jpg); 

}
a#lien6:hover{
background-image: url(p2.jpg);
}

Bonjour,

merci^^

par contre j'ai essayer un autre truc vu que c'est des images différentes, ça fonctionne, mais je sais pas ce que tu en pensses, si sa fait propre ou un peu sale ...

HTML :

<div id="navigation" >
<ul class="font_menu">
<li class="menu_1"><a href="#">Accueil</a></li>
<li class="menu_2"><a href="#">Nos marchés</a></li>
<li class="menu_3"><a href="#">Programme</a></li>
<li class="menu_4"><a href="#">Nos partenaires</a></li>
<li class="menu_5"><a href="#">Qui sommes nous?</a></li>
<li class="menu_6"><a href="#">Nous contacter</a></li>
</ul>
</div>

CSS :

#navigation ul{
list-style: none;
padding: 0;
margin: 0;
}

#navigation li{
float: left;
margin: 0;
padding: 0;
}

.menu_1{
background-image:url(../Images/menu_1.gif);
height:63px;
width:142px;
}
.menu_2{
background-image:url(../Images/menu_2.gif);
height:63px;
width:125px;
}
.menu_3{
background-image:url(../Images/menu_3.gif);
height:63px;
width:125px;
}

ETC jusqu'a .menu_6

merci ^^

C est pareil sauf que tu as donne des class au des id , et que tu donne une taille differente a chaque lien !

mais c est bon !

et n oublis pas les hover si tu veux changer les image au passage de la sourie
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣