Menu Horisontal Css3

by dharlaferdana

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:-webkit-linear-gradient(#689976,#ACDACC);
  background:-moz-linear-gradient(#689976,#ACDACC);
  background:-ms-linear-gradient(#689976,#ACDACC);
  background:-o-linear-gradient(#689976,#ACDACC);
  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;
  -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;
  -ms-border-radius:5px 0 0 5px;
  -o-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;
  -ms-border-radius:0 5px 5px 0;
  -o-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;
 ...