Membuat Menu CSS 3

Menu ini dibuat menggunakan HTML 5 dan CSS 3

Gambar Menu

Source Code HTML

Buat kode HTML 5 sebagai berikut

Source Code HTML

<!DOCTYPE html>
<html lang="id">
<head>
	<title>Membuat Menu CSS - Kursus Membuat Web</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="menu.css" media="all">
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">about</a></li>
			<li><a href="#">products and services</a></li>
			<li><a href="#" class="terpilih">industries</a></li>
			<li><a href="#">contacts</a></li>
		</ul>
	</nav>
</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS

 nav ul {
  padding:0;
  margin:0
}
  
nav ul li {float:left;
  padding-left:4px
}
  
nav ul li a {
  position:relative;
  float:left;
  font-size:14px;
  color:#fff;
  text-decoration:none;
  font-family:'calibri';
  text-transform:uppercase;
  height:32px;
  line-height:32px;
  background-color:#181717;
  padding:0 20px 0 10px;
  border-radius:17px;
  -moz-border-radius:17px;
  -webkit-border-radius:17px
}
  
nav ul li a:hover,  nav ul li a.terpilih {
  background-image:-moz-linear-gradient(top, #ee3c09, #b90a09);/* FF3.6 */ 
  background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #ee3c09),color-stop(1, #b90a09));/* Saf4+, Chrome */ 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee3c09', endColorstr='#b90a09');/* IE6,IE7 */ 
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee3c09', endColorstr='#b90a09')";/* IE8 */ 
}

nav ul li a:after {content:'';
  display:block;
  position:absolute;
  right:10px;
  top:13px;
  width:4px;
  height:7px;
  background:url(arrow1.gif) no-repeat 0 0
}

Lihat Demo ..