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;
    }