Menu CSS - Sliding doors (Vertical)

Suite à une question de All concernant l'article Menu CSS - Sliding doors (Horizontal) et la possibilité d'avoir les boutons les uns sous les autres, voici un article expliquant les modifications a apporter au code CSS pour un magnifique menu sliding doors vertical.

Prérequis

Le code HTML à utiliser et celui présenter dans l'article Menu CSS - Sliding doors (Horizontal)

Contrairement au menu horizontal, pour ce menu vertical, une seule possibilité s'offre à vous: les boutons de menu doivent être de largeur fixe.

Code CSS à utiliser

Le code modifié est le suivant:

CSS

#nav li {
    margin: 0;
    padding: 0;
}

#nav li a:link, #nav li a:visited {
    display: block;
    height: 32px;
    width: 200px;
    line-height: 32px;
    text-decoration: none;
    text-align: center;
    background:#fff url(nav.gif);
    padding: 0;
}

#nav li a:hover, #nav li a:active {
    background:#000 url(nav.gif) 0 -32px;
    padding: 0;
}

Résultat

Avec les mêmes images que le menu horizontal:

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

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

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