Membuat Menu DropDown Menggunakan CSS

Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web,Jika postingan sebelumnya membahas pembuatan Menu Rollover Image/ Gambar , Maka kali ini saya akan berbagi sedikit tentang Membuat Menu Dropdown Menggunakan CSS, yukk kita simak langkah-langkah nya...

Langkah 1

Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah :

<ul></ul> sebagai level utamadan

<li></li>sebagai sub level.

Saya berikan sebuah contoh Struktur HTML dari menu drop down:

<ul>

            <li><a href=”URL...”>Home</a></li>

            <li><a href=”URL...”>Profile</a></li>

            <li><a href=”URL...”>Gallery</a></li>

            <li><a href=”URL...”>Info</a></li>

            <li><a href=”URL...”>Contact</a></li>

</ul>

Langkah 2

Nah setelah selesai membuat menunya, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu). Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list.

Strukturnya akan seperti ini:

<ul>

            <li><a href=”URL...”>Home</a></li>

            <li><a href=”URL...”>Profile</a></li>

            <li><a href=”URL...”>Gallery</a>

                        <ul>

                                    <li><a href=”URL...”>Foto</a></li>

                                    <li><a href=”URL...”>Video</a></li>

                        </ul>

</li>

            <li><a href=”URL...”>Info</a></li>

            <li><a href=”URL...”>Contact</a></li>

</ul>

Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur "Gallery", tetapi sudah ikut membungkus sub menu dari "Gallery" juga (perhatikan end tag</li> yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:

Langkah 3

Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSSmasukkan kode di bawah ini :

<style>

*{

padding:0;

border:none;

margin:0 auto;

}

ul{

list-style:none;

overflow:hidden;

}

ul li{

float:left;

margin-top:5px;

}

ul li a{

background:#FFCC00;

text-align:center;

text-decoration:none;

font-family: Georgia, "Times New Roman", Times, serif;

color:#000000;

border:0.1em solid #999999;

font-size:20px;

padding:5px 5px 5px 5px;

}

ul li a:hover{

background-color: #FF9900;

}

ul li ul{

display: none;

}

ul li ul li{

float:none;

margin-bottom:10px;

}

ul li:hover ul{

display:block;

position:absolute;

}

</style>

Maka Hasil Jadinya akan seperti ini:

Catatan: untuk tambahan menu dropdown di menu lain tinggal tambahkan saja yang menu mana akan dijadikan menu dropdown sesuai kebutuhan.

Semoga bermanfaat dan selamat mencoba... ^_^