Membuat Menu Dropdown Sederhana - CSS

Assalamualaikum Warahmatullahi Wabarakatuh.

Mulai Tutorial

Langkah pertama tentunya kita buat dulu markup htmlnya, seperti dibawah ini.

<ul class=”menu”>

<li><a href=””>Menu 1</a>

<ul>

<li><a href=””>Menu 1.1</a></li>

<li><a href=””>Menu 1.2</a></li>

<li><a href=””>Menu 1.3</a></li>

</ul>

</li>

<li><a href=””>Menu 2</a>

<ul>

<li><a href=””>Menu 2.1</a></li>

<li><a href=””>Menu 2.2</a></li>

<li><a href=””>Menu 2.3</a></li>

</ul>

</li>

<li><a href=””>Menu 3</a></li>

<li><a href=””>Menu 4</a></li>

</ul>

Dan hasilnya adalah seperti dibawah ini.

Setelah itu, kita akan mulai bermain – main dengan CSS. Yang tentunya ini yang menjadi dasar dari pembuatan sebuah menu dropdown.

Sekarang kita akan memberikan style kepada class=”menu” diatas.

.menu{

list-style:none;

font:normal 13px Arial,Sans-Serif;

margin:0;

padding:0;

}

Maksud dari style diatas yaitu kita memberikan list-style=”none” kepada tag “UL” yang mempunyai class=”menu” untuk menghilangkan listnya, kemudian begitu pula dengan style yang lainnya saya yakin sahabat Newbie sudah mengerti. Sehingga hasilnya seperti dibawah ini.

Lanjut untuk memberikan style seperti dibawah ini.

.menu li{

display:block;

float:left;

margin-left:1px;

position:relative;

}

Sehingga hasilnya seperti dibawah ini.

Selanjutnya.

.menu ul{

padding:0;

margin:0;

float:none;

position:absolute;

}

Sehingga hasilnya seperti dibawah ini.

Nah, sampai disini hasilnya sudah hampir terlihat, tapi perjanan belum berakhir. Kita lanjutkan dengan style dibawah ini.

.menu li a{

display:block;

padding:5px 15px;

background:black;

color:white;

white-space:nowrap;

border-top:1px solid white;

}

Hasilnya dibawah ini.

Nah, langkah terakhir adalah kita menyembunyikan semua sub menu yang ada, kemudian memunculkannya ketika menunya terpilih.

Untuk menghilangkan sub menu kita berikan style seperti dibawah ini.

.menu ul{

display:none;

}

Hasilnya.

Dan inilah yang terpenting, untuk memunculkan sub menu ketika menu dipilih. Lihat style dibawah ini.

.menu li:hover ul{

display:block;

}

Maksud dari style diatas adalah ketika kursor berada diatas “li” maka apabila pada tag “li” terdapat tag “ul” (sub menu). Maka akan diberikan display=”block” (ini digunakan untuk memunculkannya). Dan alhasil seperti dibawah ini.

Nah, selamat mencoba sahabat Websiter Newbie. Maaf, saya tidak terlalu menjelaskan panjang lebar, karena saya ingin sahabat Newbie memahami dengan pemahaman sahabat Newbie sendiri, karena itu lebih baik. Dan melatih logika sahabat Newbie. Silahkan tinggalkan komentar jika berkenan. Kalo tidak ya gak papa sih :)

Wassalamualaikum Warahmatullahi Wabarakatuh.