Faire des menus verticaux à partir d'une liste

 



Voici un exemple très simple, jouez avec les couleurs, les arrières plans et amusez-vous.
Dans votre page html:

La partie CSS

<style type="text/css">
#navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#navlist li a
{
color:blue;
text-decoration: none;
}

#navlist li a:visited
{
color:blue;
text-decoration: none;
}
#navlist li a:hover
{
color:red;
}
</style>

La partie menu

<ul id="navlist">
<li><a href="http://pages.globetrotter.net/mcordeau/">Item un</a></li>
<li><a href="http://www.cameras-numeriques.com/">Item deux</a></li>
<li><a href="http://www.drole-video.com/">Item trois</a></li>
<li><a href="http://www.ricaner.com/">Item quatre</a></li>
<li><a href="http://www.formation-html.com/">Item cinq</a></li>
</ul>

Le résultat:


Suivant