Css Menu Horisontal

/*
Menu horisontal Css3
Name: DHF-NAF
Designer: Dharla Ferdana
URL: http://www.dhf.web.id
*/

.nav-dhf {
  display:inline-block;
  -webkit-box-shadow:0 0 15px 1px rgba(0,0,0,0.35);
  -moz-box-shadow:0 0 15px 1px rgba(0,0,0,0.35);
  -ms-box-shadow:0 0 15px 1px rgba(0,0,0,0.35);
  -o-box-shadow:0 0 15px 1px rgba(0,0,0,0.35);
  box-shadow:0 0 15px 1px rgba(0,0,0,0.35);
  overflow:hidden;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  counter-reset:flag;
}
.nav-dhf a {
  text-decoration:none;
  outline:none;
  display:block;
  float:left;
  font-size:12px;
  line-height:36px;
  color:white;
  padding:0 10px 0 60px;
  background:#666;
  -webkit-background:linear-gradient(#666,#333);
  -moz-background:linear-gradient(#666,#333);
  -ms-background:linear-gradient(#666,#333);
  -o-background:linear-gradient(#666,#333);
  background:linear-gradient(#666,#333);
  position:relative;
}
.nav-dhf a:first-child {
  padding-left:46px;
  -webkit-border-radius:5px 0 0 5px;
  -moz-border-radius:5px 0 0 5px;
  border-radius:5px 0 0 5px;
}
.nav-dhf a:first-child:before {
  left:14px;
}
.nav-dhf a:last-child {
  -webkit-border-radius:0 5px 5px 0;
  -moz-border-radius:0 5px 5px 0;
  border-radius:0 5px 5px 0;
  padding-right:20px;
}
.nav-dhf a.active,
.nav-dhf a:hover {
  background:#333;
  -webkit-background:linear-gradient(#333,#000);
  -moz-background:linear-gradient(#333,#000);
  -ms-background:linear-gradient(#333,#000);
  -o-background:linear-gradient(#333,#000);
  background:linear-gradient(#333,#000);
}
.nav-dhf a.active:after,
.nav-dhf a:hover:after {
  background:#333;
  -webkit-background:linear-gradient(135deg,#333,#000);
  -moz-background:linear-gradient(135deg,#333,#000);
  -ms-background:linear-gradient(135deg,#333,#000);
  -o-background:linear-gradient(135deg,#333,#000);
  background:linear-gradient(135deg,#333,#000);
}
.nav-dhf a:after {
  content:'';
  position:absolute;
  top:0;
  right:-18px;
  width:36px;
  height:36px;
  z-index:1;
  background:#666;
  -webkit-transform:scale(0.707) rotate(45deg);
  -moz-transform:scale(0.707) rotate(45deg);
  -ms-transform:scale(0.707) rotate(45deg);
  -o-transform:scale(0.707) rotate(45deg);
  transform:scale(0.707) rotate(45deg);
  -webkit-background:linear-gradient(135deg,#666,#333);
  -moz-background:linear-gradient(135deg,#666,#333);
  -ms-background:linear-gradient(135deg,#666,#333);
  -o-background:linear-gradient(135deg,#666,#333);
  background:linear-gradient(135deg,#666,#333);
  -webkit-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);
  -moz-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);
  -ms-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);
  -o-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);
  box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);
  -webkit-border-radius:0 5px 0 50px;
  -moz-border-radius:0 5px 0 50px;
  border-radius:0 5px 0 50px;
}
.nav-dhf a:last-child:after {
  content:none;
}
.nav-dhf a:before {
  content:counter(flag);
  counter-increment:flag;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  width:20px;
  height:20px;
  line-height:20px;
  margin:8px 0;
  position:absolute;
  top:0;
  left:30px;
  background:#444;
  -webkit-background:linear-gradient(#444,#222);
  -moz-background:linear-gradient(#444,#222);
  -ms-background:linear-gradient(#444,#222);
  -o-background:linear-gradient(#444,#222);
  background:linear-gradient(#444,#222);
  font-weight:bold;
  text-align:center;  
}
.flat a,
.flat a:after {
  background:white;
  color:black;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -ms-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s;
}
.flat a:before {
  background:white;
  -webkit-box-shadow:0 0 0 1px #ccc;
  -moz-box-shadow:0 0 0 1px #ccc;
  -ms-box-shadow:0 0 0 1px #ccc;
  -o-box-shadow:0 0 0 1px #ccc;
  box-shadow:0 0 0 1px #ccc;
}
.flat a:hover,
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
  background:#9EEB62;
}

Html Menu Black

<div class="nav-dhf">
 <a href="#" class="active">Browse</a>
 <a href="#">Compare</a>
 <a href="#">Order Confirmation</a>
 <a href="#">Checkout</a>
</div>

Html Menu White

<div class="nav-dhf flat">
 <a href="#" class="active">Browse</a>
 <a href="#">Compare</a>
 <a href="#">Order Confirmation</a>
 <a href="#">Checkout</a>
</div>