<html>
<head>
<style type="text/css">
.menu1 {position: absolute; /* envoi du menu dans 1 zone précise
de l'écran */
top: 400px; /* menu1 placé à 380px du haut de l'élément
parent (ici la page) */
left: 80px ; /* menu1 placé à 80px de la gauche de l'élément
parent (ici la page) */
width: 80%} /* largeur du menu en % de l'élément parent
(la page) */
border-bottom: solid 2px black} /* bordure en-dessous de menu1*/
.menu1 a {text-decoration:none ; /* annule le soulignement des liens
dans menu1*/
color:black} /* met la police des liens en noir */
a span {display:none} /* cache les <span> placés dans un lien <a> */
a:hover {border-bottom: 0px}/* indispensable pour IE seulement */
a:hover span {display: block; /* Montre le texte <span> lors
du survol */
position: absolute; /* envoi le texte <span> dans 1 zone précise
de l'écran */
top: 20px; /* cette zone se situe à 20 pixels du haut de l'élément
parent (menu1)*/
left: 0px ;} /* cette zone se situe à 0 pixels de la gauche
de l'élément parent (menu1)*/
</style>
</head>
<body>
<div class="menu1"> <!-- début de menu1 -->
<a href="#">lien 1 | <span> a a a a a a a a a</span></a>
<!-- lien et son commentaire en survol -->
<a href="#">lien 2 | <span> bbb bbb bbb bbb bbb</span></a>
<!-- idem -->
<a href="#">lien 3 | <span> cc cc cc cc cc cc</span></a>
<!-- idem -->
<a href="#">lien 4 | <span> ddddddd ddddddd</span></a>
<!-- idem -->
</div> <!-- fin de menu1 -->
</body>
</html>
COMMENTAIRES
Idem script précédent, mais présenté différement, d'une façon plus adaptée aux commentaires d'un menu.
Nota : attention position:absolute positionne à partir de la position de la boite "parent", pas à partir du haut de la page. Ici, la boite parent, c'est <a>. Cela peut entraîner des problèmes de positionnement dans certains cas.