Membuat Dropdown Menu HTML & CSS

Membuat Dropdown Menu HTML & CSS
Mudah & Sederhana

Sebelum mulai membuat dropdown menu ini, pastikan kalian sudah memahami tentang position: relative dan position: absolute; pada link ini. Setelah itu, bisa lanjutkan ke tutorial dibawah ini. Kadang suka banyak yang bingung bagaimana pastinya cara membuat sub menu muncul atau biasa disebut dropdown menu, kebanyakan yang bingung dibagian pembagian ul dan li nya pada bagian akhir sebelum muncul ul sub menu.

Langkah mudahnya kalian harus ketahui dulu kalo menu dalam HTML adalah menggunakan list (daftar) yang kemudian di variasi / di modifikasi lagi sehingga terlihat keren dan bisa dijadikan menu. Dasarnya membuat menu pada HTML itu menggunakan tag menu. Kali ini karena judulnya sederhana dan biar mudah dipahami sama teman-teman yang baru mau mulai belajar atau mungkin mau memingat lagi dasar-dasarnya.

Disini saya menggunakan tag nav kemudian saya masukkan unordered list alias ul dan didalam nya saya kasih list alias li , setelah itu didalam li nya saya kasih a (gunanya untuk memasukkan link, karena menu pasti ada link didalamnya. Mungkin sampai sini kalian masih paham, tapi biasanya pada bagian membuat submenu nya bingung dimana mulai membuatnya.

Kalian cukup masukkan ul lagi pada bagian menu (list) yang akan dijadikan dropdown, misalnya pada contoh diatas saya akan membuat menu “Layanan” menjadi dropdown alias punya sub menu didalamnya. Maka sebelum tag penutup li pada “Layanan” kalian masukkan menu baru lagi alias ul seperti biasa. (lihat gambar)

Pada gambar tersebut, saya buat ul baru lagi (untuk sub menu) didalam li nya “Layanan”. Itu artinya nanti ini akan menjadi sub menu untuk menu “Layanan”. Jadi, keseluruhan sub menu yang dibuat ini ada didalam “Layanan“, jangan sampai salah penempatannya. Sudah seperti ini, kalian bisa cek hasilnya. Kalo punya kalian sesuai dengan langkah-langkah tersebut maka hasilnya seperti pada gambar ini (lihat gambar).

Lihat bagian sub menu berada menjorok ke dalam dari bagian menu “Layanan” itu artinya submenu tersebut adalah sub menu nya “Layanan” dan “Layanan” adalah induk nya. Kalo menu kalian seperti ini, maka CSS nya kalian bisa masukkan seperti kode dibawah ini:

* {
margin: 0;
padding: 0;
}
nav {
position: relative;
top: 80px;
height: 50px;
line-height: 50px;
background: #ff0000;
width: 600px;
margin: auto;
}
nav ul {
list-style: none;
}
nav ul li a {
text-decoration: none;
color: #000;
float: left;
width: 150px;
display: block;
text-align: center;
}
nav ul li a:hover {
background: #fff;
display: block;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background: #ff0000;
top: 50px;
left: 300px;
}
Seperti yang saya bilang, kalian perlu memahami position: relative dan position: absolute nya, karena disini submenu kita simpan sebagai absolute agar dapat kita tentukan dimana posisinya sesuai keinginan. Kemudian pada nav ul ul {display: none;} itu artinya ul yang kedua di dalam nav (yaitu sub menu) kita tiadakan alias disembunyikan.

Lalu kapan munculnya ? Muncul nya ketika li Layanan disentuh makanya ada nav ul li:hover ul. Kalo urusan warna, kalian bisa ubah sesuai selera aja. Untuk ukuran lebar pada nav ul li a {width: 150px;} kalian bisa sesuaikan dengan panjang tulisan menu nya takutnya ada menu yang lebih panjang / lebar dari 150px maka silahkan sesuaikan. Tapi harap diingat! Ketika merubah lebar ini kalian harus sesuaikan juga lebar nav yang sudah kita atur diatasnya nav {width: 600px;}.

Silahkan tambahkan lebar nav juga ketika kalian menambahkan lebar a begitupun ketika dikurangi maka ikut kurangi juga biar pas dan tidak berantakan. Kenapa saya kasih 600px untuk lebar nav ? Karena lebar a kan 150px, total menu utama (selain sub menu, karena sub menu turun kebawah. Sekarang kita hitung yang rata horizontal sesuai nav) ada 4 yaitu “Home”, “About”, “Layanan” dan “Blog” masing-masing memiliki lebar 150px, tinggal dikali 4 aja maka lebar mereka keseluruhan adalah 600px; dan saya maunya nav ini pas dengan menu menu utama makanya saya simpan 600px; juga.

Hasil dari HTML dan CSS diatas akan seperti pada gambar ini (lihat gambar). Warna nya kalian bisa tentukan sendiri dibagian background dan color.

Selamat mencoba !