Pure CSS vertical menu on the right n°3 with a pop up / layout: 3 columns - header

CSS for the vertical menu on the right

#zone_right #content2{
position:relative;
width:9em;
}
#zone_right #menu{
text-align:center;
position:relative;
height:8em;
}
#zone_right #menu a{
position:relative;
text-decoration:none;
background-color:#zone_right #D2E1FB;
color:#zone_right #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 #zone_right #0A00B0;
}
#zone_right #menu a .topleft, #zone_right #menu a .topright{
position:absolute;
top:0;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #zone_right #E9F5FE;
}
#zone_right #menu a .topleft{
left:0;
border-right:10px solid #zone_right #D2E1FB;
}
#zone_right #menu a .topright{
left:9em;
border-left:10px solid #zone_right #D2E1FB;
}
#zone_right #menu a:hover{
background-color:#zone_right #A9CFFE;
color:#zone_right #FFF;
}
#zone_right #menu a:hover .topleft{
border-right:10px solid #zone_right #A9CFFE;
}
#zone_right #menu a:hover .topright{
border-left:10px solid #zone_right #A9CFFE;
}
/**/
#zone_right #menu a span.blk{
font-size:.75em;
visibility:hidden;
position:absolute;
top:auto;
background-color:#zone_right #E9F5FE;
color:#zone_right #0A00B0;
border:1px solid #zone_right #0A00B0;
left:0;
display:block;
padding:0 5px;
z-index:10;
}
#zone_right #menu a:hover span.blk{
visibility:visible;
width:11em;
}
* html #zone_right #menu a:hover{
height:1%;
}
/* start IE_Mac hide\*/
* html #zone_right #menu a:hover span.blk/**/{
margin-left/**/:1.1em; /*value for MSIE 5.5*/
margin-left:/**/.8em; /*value for MSIE 6*/
}
/* end IE_Mac hide*/

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

CSS / 3 columns / header / footer