Créer un menu verticale a partir d’une liste a puce
Créer un menu verticale a partir d’une liste a puce, cela peut s’avéré très pratique si on veut créer se genre de menu sans avoir recours aux images et aux tableaux. Ce qu’il faut pour ça : Une liste a puce
- menu 1
- menu 2
- menu 3
Et un petit peu de style
Ce que nous allons faire maintenant c’est de redéfinir l’aspect de ces balises li et ul 1. supprimer les puces :
list-style-type: none;
2. supprimer les marges :
margin: 0px;
padding: 0px;
Bien sur avec de la mise en forme pour la forme finale et c’est fini :
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
background-color: #FFCC00;
display: block;
padding: 3px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
text-decoration: none;
font-weight: bold;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
Li:hover {
background-color: # 000000;
display: block;
padding: 3px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
text-decoration: none;
font-weight: bold;
color: #FFCC00;
font-family: Arial, Helvetica, sans-serif;
}
No related posts.
