Membuat Menu CSS 3
Menu ini dibuat menggunakan HTML 5 dan CSS 3

Source Code HTML
Buat kode HTML 5 sebagai berikut
<!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
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
}