Menu Vertical Css Pronto - Horizontal Purple 3D Round CSS

Mục lục

<div class=”onlycssmenu clearfix”>
<ul class=”clearfix”>
<li class=”first”><a href=”#” class=”active” title=”Only css menu”><span>Only css Menu</span></a></li>
<li><a href=”#” title=”Css Menu”><span>Css Menu</span></a></li>
<li><a href=”#” title=”Css Menu”><span>Css Menu</span></a></li>
<li><a href=”#” title=”Only Css Menu”><span>Web 2.0 Menu</span></a></li>
<li class=”nopipe”><a href=”#” title=”Css Menu”><span>Web 2.0 Menu</span></a></li>
</ul>
</div>

<style>
.clearfix:after {
content: “.”;
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
.onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
background-image:url(images/menu_stip.png);
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.onlycssmenu {
height:41px;
line-height:41px;
background-position:-1005px 0px;
padding-left:10px
}
.onlycssmenu ul {
background-position: right -45px;
height:41px;
line-height:41px;
margin:0;
padding:0;
list-style:none;
}
.onlycssmenu ul li {
display:inline;
float:left;
padding:6px 6px 0 5px;
background:url(images/menu_div.png) no-repeat right 11px;
}
.onlycssmenu ul li.nopipe {
background:none;
}
.onlycssmenu ul li a {
float:left;
padding-left:15px;
color:#FFFFFF;
text-decoration:none;
}
.onlycssmenu ul li a span {
float:left;
padding-right:15px;
height:30px;
line-height:30px;
}
.onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
background-position: -1005px -90px;
color:#6d30a9;
}
.onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
background-position:right bottom;
}
</style>

The Blog