Dépannage informatique à domicile

Accueil Prestations News Nos Sites Astuces Contact

Ce code affiche un menu avec des puces et un texte. un survol ou clic sur une puce modifie l'image et ouvre le lien.

Exemple de menu horizontal avec puce graphique

• Lien 1
• Lien 2
• Lien 3
• Lien 4

Codage CSS de l'exemple:

/* Menu avec puces d'arriére plan graphique */
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Geargia, Times serif;
list-style-type: none;
}

#menu li {
float: left;
margin: 0 5px;
}

/* image de départ en arriére plan */
#menu a {
color: #000;
text-decoration: none;
padding-left: 20px;
background: url(image/image2.png) left center no-repeat;
}

/* changement d'image au survol */
#menu a:hover, #menu a:focus {
background-image: url(image/image3.png);
}