Dépannage informatique à domicile

Accueil Prestations News Nos Sites Astuces Contact

Ce code représente le texte explicatif sous forme rectangulaire blanche large de 100px et haute de 20px, placée en position relative pour contenir des éléments en position absolue à 23px de haut du conteneur.

Exemple avec hover:

• Lien 1Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Lien 2Cras eu mi vel pede dignissim. Etiam malesuada scelerisque massa.
• Lien 3Cras fringilla. Integer in neque. Null a massa. Vestibulum eleifend..
• Lien 4Sed bibendum vehicula sem. Donec venetatis diam eu erat. Ut retrum..

Codage CSS de l'exemple:

ul {
list-style-type: none;
margin: 0;
padding: 0;
/* positionnement du menu, pour contenir des éléments positionnés */
position: relative;
width: 500px;
}

li {
float: left;
border-bottom: 1px solid black;
}

/* définition de chaque bouton du menu*/
#menu a {
width: 100px;
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff;
text-decoration: none;
color: #000;
background: #fff;
}

#menu a:hover {
color: #411;
background: #aaa;
border: 1px solid black;
border-bottom: 1px solid #555;
}

/* définition de la balise span incluse dans le lien "a" */
#menu a span {
display: none;
}

#menu a:hover span {
display: block;
position: absolute;
top: 23px;
left: 0px;
width: 500 px;
text-align: left;
color: white;
}