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 :



0 comments:

Post a Comment

Please Your Comment

Entri Populer

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin