Fonctionnement
Tout fonctionne simplement avec un peu de CSS. Nous allons en fait utiliser des balises <ul> et <li> qui sont utilisées pour faire des puces dans des champs de texte.
A l'aide du CSS, nous allons redéfinir le style prédéfini pour le transformer en list de bloc.
Le principe est de changer la couleur de fond au survol de la souris, nous allons donc définir un état standart et un au survol (hover).

Le code CSS
Vous remarquerez que le résultat n'est pas le même entre firefox et ie (au niveau des pointillé). En fait IE ne reconnait pas le style "dotted" et le remplace par des tirets. Si l'on veut à tout prix des pointillés, il faut utiliser une image de pointillé en arrière plan. Mais bon, sous ie ça reste quand même assez joli.
#links ul {
    /*on supprime les puces*/
    margin: 0;/*pour IE*/
    padding: 0;/*pour firefox*/
}

#links li a{
    /*On ne s'adapte pas au texte*/
    display: block;
    /*pointillés*/
    border-bottom: 1px dotted #BBBBBB;
    /*On défini la taille ici (pour IE)*/
    width: 203px;
    padding: 5px 10px;

    /*cet ordre est important*/
    font:bold 15px "Arial";
    color: #B50063;
    text-decoration: none;
}

#links li a:hover{
    /*On change la couleur de fond*/
    background: #FFE4F3;
}

/*exception pour <em>*/
#links a em {
    color: #666666;
    display: block;
    font-size:12px;
    font-weight:normal;
}
Le code HTML
Donc je vous ai mis seulement deux blocs, mais une fois que vous avez compris le principe vous pouvez en mettre autant que vous le souhaitez. Pour un effet plus convivial, je trouve qu'il est mieux de mettre un title (comme je l'ai pas fait), au survol de la souris vous aurez un petit texte qui s'affiche !
<div id="links">
  <ul>
    <li>
      <a href="#">Titre du block
      <em>Contenu du block</em></a>
    </li>
    <li>
      <a href="#">Titre du block
      <em>Contenu du block</em></a>
    </li>
  </ul>
</div>
Source
Quelquechose vous a échappez et vous voudriez télécharger directement la source ?
Vous voulez simplement voir l'effet ?
Cliquez sur le lien ou enregistrez la cible : block hover effect
C'est mon premier post, donc n'hésitez pas à faire une critique, une suggestion, un don(bien marqué Nico sur le chèque)...