Horizontal Red 3D Round CSS Menu

horizontal-3d-red-round-cssmenu-07

HTML

  • <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>

CSS

  • <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:#530316;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera