Pure CSS vertical menu on the right n°2 / layout: 3 columns - header

CSS for the vertical menu on the right

#content2{
position:relative;
width:9em;
}
#menu{
text-align:center;
position:relative;
height:8em;
}
#menu a{
position:relative;
text-decoration:none;
background-color:#D2E1FB;
color:#0A00B0;
font-family:"courier new", "sans serif";
display:block;
width:9em;
height:1em;/*rounding error with Mozilla*/
font-size:.9em;
padding:5px;
border-bottom:1px solid #0A00B0;
}
#menu a .topleft, #menu a .topright{
position:absolute;
top:0;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #E9F5FE;
}
#menu a .topleft{
left:0;
border-right:10px solid #D2E1FB;
}
#menu a .topright{
left:9em;
border-left:10px solid #D2E1FB;
}
#menu a:hover{
background-color:#A9CFFE;
color:#FFF;
}
#menu a:hover .topleft{
border-right:10px solid #A9CFFE;
}
#menu a:hover .topright{
border-left:10px solid #A9CFFE;
}

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

CSS / 3 columns / header / footer