Menu Drop Down Sederhana

Menu Dropdown berfungsi saat kita membutuhkan sebuah sub menu untuk menu utama. Nah pada tutorial kali ini saya akan mencoba membuat sebuah menu dropdown sederhana dengan CSS. Oke deh..udahan basa basinya langsung aja ke TKP >>>
1. langkah pertama yaitu membuat file CSS dan berinama default.css >> kemudian ketikan kode berikut :

ul {
margin:0;
padding:0;
list-style:none;
}

ul li {
position:relative;
float:left;
width:150px;
}

li ul {
position:absolute;
top:30px;
display:none;
}

ul li a {
display:block;
text-decoration:none;
line-height:25px;
color:#000;
padding:5px;
background:#CC0;
margin:0 1px;
}

ul li a:hover {
background-color:#FFCC00;
}

li:hover ul {
display:block;
}

2. Kemudian buatlah sebuah file HTML baru untuk menampilkan style menu pada file css yang baru dibuat . ketikan code HTML seperti berikut :

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Programming</a></li>
</ul>
</li>
<li><a href="#">Post Feed</a>
<ul>
<li><a href="#">Via Web</a></li>
<li><a href="#">Via email</a></li>
<li><a href="#">Via facebook</a></li>
<li><a href="#">Via Twitter</a></li>
</ul>
</li>
</ul>

3. Jika benar makan hasilnya ssperti berikut :

Artikel Menarik Lainnya :