Travaux pratiques
TROISIÈME PARTIE
154
CSS
ul {
list-style-type: none;
margin:0;
padding:0;
position: relative;
/* positionnement du menu, pour contenir des éléments positionnés */
width: 500px;
}
li {
float: left;
border-bottom: 1px solid black;
}
#menu a { /* définition de chaque bouton du menu */
width: 100px; /* largeur du bouton, modifiable à loisir */
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;
}
#menu a span { /* définition de la balise span incluse dans le lien */
display: none;
}
#menu a:hover span { /* définition de la balise span lors du survol */
display: block;
position: absolute;
top: 23px;
left: 0;
width: 500px;
text-align: left;
color: #000;
}