Salut a tous ! J'ai besoin de votre aide pour faire mon menu car j'arrive pas a le faire...

Voici comment doit être mon menu:
Il doit être aprés l'image d'en tête juste en dessous de la bordure rouge, horizontal avec cette image en fond:

Les liens doivent êtres normal gris (#707070) et lorsqu'on passe la souris dessus le lien dois "grossir" de quelques pixels et doit etre en rouge (#ff000) et je voudrais que les liens soient separés par cette image:


Site: http://benjyspider.free.fr/

Il y a tellement de choix que j'ai du mal à faire une sélection. Le bouton 'rechercher' est ton ami.

http://www.siteduzero.com/tutoriel-3-3 [...] rizontal.html
http://www.siteduzero.com/tutoriel-3-3 [...] roulante.html
http://www.siteduzero.com/tutoriel-3-3 [...] -onglets.html
http://www.siteduzero.com/tutoriel-3-3 [...] ensibles.html
http://www.siteduzero.com/tutoriel-3-3 [...] rizontal.html
http://www.siteduzero.com/tutoriel-3-3 [...] t-en-css.html
http://www.siteduzero.com/tutoriel-3-3 [...] mpatible.html

J'arrive pas à faire les liens: http://benjyspider.free.fr/

#menu
{
   height: 50px;
   background-image: url("images/fondmenu.gif");
   background-repeat: repeat-x;
   border-bottom: 2px solid red;
}

.element_menu ul
{
   list-style-image: none;
}

.element_menu a
{
   color: #707070;
}

.element_menu a:hover
{
   color: #ff000;
}

<div id="menu">
       <ul>
           <li><a href="test">Test</a></li>
       </ul>
</div>

Dans ta feuille CSS, tu as défini un fond blanc aux listes contenues dans des éléments portant la classe element_menu:

.element_menu ul {
  background-color:#FFFFFF; /* Cette ligne-ci */
  font-family:Impact;
  height:20px;
  list-style-type:none;
  padding:5px;
  text-align:center;
  text-decoration:none;
}

Comme ta liste est située "au-dessus" de ton #menu, son fond blanc "cache" celui de #menu.
Il te suffit donc simplement d'enlever cette ligne et tout rentrera dans l'ordre