Menu Horisontal Css3

HTML

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

<br /><br />

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

CSS

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
  * {
  margin:0;
  padding:0;
}

html,
body {
  min-height:100%;
}

body {
  text-align:center;
  padding-top:100px;
  background:#689976;
  background:linear-gradient(#689976,#ACDACC);
  font-family:'Merriweather Sans',arial,verdana;
}

/*
Blogger Template Shell
Name: DHF
Designer: Dharla Ferdana
URL: http://www.dhf.web.id
*/

.nav-dhf {
  display:inline-block;
  box-shadow:0 0 15px 1px rgba(0,0,0,0.35);
  overflow:hidden;
  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;
  background:linear-gradient(#666,#333);
  position:relative;
}

.nav-dhf a:first-child {
  padding-left:46px;
  border-radius:5px 0 0 5px;
}

.nav-dhf a:first-child:before {
  left:14px;
}

.nav-dhf a:last-child {
  border-radius:0 5px 5px 0;
  padding-right:20px;
}

.nav-dhf a.active,
.nav-dhf a:hover {
  background:#333;
  background:linear-gradient(#333,#000);
}

.nav-dhf a.active:after,
.nav-dhf a:hover:after {
  background:#333;
  background:linear-gradient(135deg,#333,#000);
}

.nav-dhf a:after {
  content:'';
  position:absolute;
  top:0;
  right:-18px;
  width:36px;
  height:36px;
  transform:scale(0.707) rotate(45deg);
  z-index:1;
  background:#666;
  background:linear-gradient(135deg,#666,#333);
  box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);
  border-radius:0 5px 0 50px;
}

.nav-dhf a:last-child:after {
  content:none;
}

.nav-dhf a:before {
  content:counter(flag);
  counter-increment:flag;
  border-radius:100%;
  width:20px;
  height:20px;
  line-height:20px;
  margin:8px 0;
  position:absolute;
  top:0;
  left:30px;
  background:#444;
  background:linear-gradient(#444,#222);
  font-weight:bold;
  text-align:center;  
}

.flat a,
.flat a:after {
  background:white;
  color:black;
 ...