CSS TutorialLesson 35Preview gratis
CSS Dropdowns
Lesson ini bagian dari CSS · Semua level
Ringkasan
Dropdown dibuat dengan menyembunyikan menu daftar, misalnya dengan visibility: hidden, lalu menampilkannya saat pengunjung mengarahkan kursor ke elemen induknya lewat :hover. Wadah menu memakai position: relative dan menunya memakai position: absolute agar tampil menempel di bawah tombol pemicu. Dropdown modern juga bisa diaktifkan lewat fokus keyboard demi aksesibilitas.
Poin kunci
- Menu dropdown disembunyikan dengan visibility: hidden atau display: none pada menu absolute.
- Saat induk di-hover, keadaan menu diubah menjadi visible.
- Wadah memakai position: relative, menu memakai position: absolute dengan top dan left yang sesuai.
- Menyusun <a> dengan display: block membuat baris menu rapi dan penuh lebar.
- Tombol pemicu mudah ditekan dan menu juga sebaiknya bisa diakses lewat fokus keyboard.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.