Menu CSS vertical à gauche - animation et utilisation de float / 3 colonnes avec en-tête et pied de page

CSS pour un menu vertical à gauche

#zone_gauche .contenu{padding:0;}
#zone_gauche dl{
margin:0;
padding:0;
overflow:hidden;
border-bottom:1px solid black;
}
#zone_gauche dt{
float:left;
line-height:1.4em;
border:1px solid black;
border-bottom:none;
padding:0;
width:9.9em;
}
#zone_gauche dt a{
background-color:#D2E1FB;
display:block;
text-decoration:none;
font-weight:800;
padding:4px;
border-left:.5em solid #E8F0FD;
border-right:.5em solid #E8F0FD;
color:#0A00B0;
}
#zone_gauche dt a:hover{
background-color:#A9CFFE;
border-right:.5em solid #000;
border-left:.5em solid #000;
color:#FFF;
}

Et pour une compatibilité avec IE6, 5.5 et 5 les commentaires conditionnels :

<!--[if lt IE 6]>
<style type="text/css">
#zone_gauche dt,#zone_gauche dt a{width:100%;}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
#zone_gauche dt a{height:1%;}
#zone_gauche dl{height:1%;}
</style>
<![endif]-->
<!--[if IE 5.5000]>
<style type="text/css">
#zone_gauche dl{height:1%;}
</style>
<![endif]-->

Cliquez sur un des menus pour afficher son code CSS.
Passez le curseur sur les rubriques pour animer les liens.

CSS / 3 colonnes / en-tête / pied de page