Langkah 1 - HTML Markup
Saya akan membuat daftar unordered dengan item daftar dan tag anchor untuk setiap link menu. Untuk membuat sub menu menambah daftar unordered dalam daftar.
Langkah 2 - Menu Layout
Saya akan mulai menghapus margin, padding, perbatasan dan garis besar dari semua elemen dari menu. Kemudian kita akan menambah lebar tetap dan tinggi ke menu, sudut dibulatkan dan CSS3 gradien. Untuk menyelaraskan hubungan horisontal kita akan mengapung daftar ke kiri. Kita juga perlu mengatur posisi untuk relatif karena kita akan membutuhkan bahwa untuk menyelaraskan sub menu.
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
height: 40px;
width: 505px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
Demo : CSS3 Dropdown Menu
Download source code : CSS3 Dropdown Menu