Comment faire ce style de menu

Dans ta feuille de style tu va faire apparaître une image au survol du lien :

a:hover
{
    background-image : ... ;
    margin: ... ;
}

A toi après d'adapter ton code en fonction de se que tu veux (marge, padding etc...)

Pour ma part je n'aurai pas fait comme ça.

Dans ma façon de voir les choses, je m'aperçoit que le texte apparait avec une opacité progressive. C'est surement du JQuery. Donc voici ce que je ferai:

• Tout d'abord le menu. Plusieurs façons de faire. Soit une liste avec ul et li alignée avec du CSS. Soit par des divs également aligné avec du CSS.

  <a href="monlien1.html"id='menu1'> Lien1 </a>
  <a href="monlien2.html"id='menu2'> Lien2 </a>
  <a href="monlien3.html"id='menu3'> Lien3 </a>

• Ensuite, on positionne les images qui apparaitront au survol. Donc dans le html, en dessous de ton menu: (admettons qu'il y a 3 menus)

  <img src="monimage1.png" alt="" id='menu1_img' />
  <img src="monimage2.png" alt="" id='menu2_img' />
  <img src="monimage3.png" alt="" id='menu3_img' />

• Puis on passe au CSS de ces 3 images:

  menu1_img, #menu2_img, #menu3_img{

  position:absolute;

  }

  menu1_img{ top:20px; left:200px; // on le positionne au dessus (ou au dessous du menu1) } menu2_img{ top:20px; left:400px; // on le positionne au dessus (ou au dessous du menu2) } menu3_img{ top:20px; left:600px; // on le positionne au dessus (ou au dessous du menu3) }

-Et enfin le JQuery (il est necessaire de telecharger la librairie JQuery):
(la syntaxe est à vérifiée)

//On cache par défaut les 3 images
$('#menu1_img').hide();
$('#menu2_img').hide();
$('#menu3_img').hide();

//Quand la souris passe sur un des menus, l'image s'affiche
$('#menu1').mouseover(function() {
  $('#menu1_img').fadeIn("slow"); //fadeIn affiche le div
});
$('#menu2').mouseover(function() {
  $('#menu2_img').fadeIn("slow");
});
$('#menu3').mouseover(function() {
  $('#menu3_img').fadeIn("slow");
});

Voila, je te laisse faire la suite du code pour dire "Quand la souris n'est plus sur le lien (mouseout), l'image se cache (fadeOut())".

;)