Pure CSS vertical menu on the left using float with an animation / layout: 3 columns - header

CSS for a vertical menu on the left

#zone_left .content{padding:0;}
#zone_left dl{
margin:0;
padding:0;
overflow:hidden;
border-bottom:1px solid black;
}
#zone_left dt{
float:left;
line-height:1.4em;
border:1px solid black;
border-bottom:none;
padding:0;
width:9.9em;
}
#zone_left 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_left dt a:hover{
background-color:#A9CFFE;
border-right:.5em solid #000;
border-left:.5em solid #000;
color:#FFF;
}

And to be compatible with IE6, 5.5 and 5 the conditional comments :

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

Click on a menu to display its CSS code.
Hovering the menu will animate the links.

CSS / 3 columns / header / footer