Hallo sahabat Dumetschool, dalam kesempatan ini saya akan membahas tentang Cara Sederhana Membuat Dropdown Hover Menggunakan Bootstrap 4. Sahabat tentu tidak asing lagi jika sudah menggunakan Bootstrap ya. Karena disini menggunakan Bootstrap tentu sangat dimanjakan dalam membuatnya. Kenapa bisa begitu tentu kita hanya tinggal mencari layout navbar pada kolom pencarian. Sahabat ketikkan saja navbar kemudian cari tampilan yang ada dropdownnya. Jadi saat kita pilih navbar dropdown kita harus melakukan klik terlebih dahulu untuk melihat submenu. Nah disini saya akan membuat berbeda dengan cara di hover menu dropdownnya. Oke langsung saja kita buat seperti langkah dibawah ini:
Pertama, sahabat silahkan membuat file HTML lalu ketikkan code berikut:
Document
pada code diatas adalah struktur awal atau template dari bootstrap.
Langkah kedua yaitu tambahkan code dibawah ini untuk bagian navbar :
LOGO
- Home [current]
- Profile
- Category
First Product Second Product Third Product- HELP
Jika sudah silahkan simpan terlebih dahulu. Untuk memberikan efek hover tambahkan style CSS berikut ini:
.dropdown:hover>.dropdown-menu{display: block}
OKe simpan kembali filenya, kemudian buka browser masing masing dan lihat hasilnya seperti tampilan dibawah ini:
Dropdown 1