Cool navigation design using css

Cool vertical menu using CSS

body{background:#3A3A3A;}
.nav{float:left;}
.nav li{line-height:2.5em;float:none;list-style:none;margin:0;}
.nav li a{background:#1E1E1E;width:7em;color:#AAA;display:block;line-height:2em;margin-top:1px;white-space:nowrap;text-decoration:none;padding:7px 20px;}
.nav li a:hover{color:#FFF;background:#3A3A3A;}
.color1.menuitem{color:#FCA13F;}
.color2.menuitem{color:#248AAF;}
.color3.menuitem{color:#FAC552;}
.color4.menuitem{color:#669;}
.color5.menuitem{color:#EB5745;}
.color6.menuitem{color:#1076B9;}
.color7.menuitem{color:#3CBC8D;}
.color8.menuitem{color:#3DBFD9;}
.navAlt li:hover .color1.menuitem{background:#FCA13F;}
.navAlt li:hover .color2.menuitem{background:#248AAF;}
.navAlt li:hover .color3.menuitem{background:#FAC552;}
.navAlt li:hover .color4.menuitem{background:#669;}
.navAlt li:hover .color5.menuitem{background:#EB5745;}
.navAlt li:hover .color6.menuitem{background:#1076B9;}
.navAlt li:hover .color7.menuitem{background:#3CBC8D;}
.navAlt li:hover .color8.menuitem{background:#3DBFD9;}

DEMO