Cara Membuat Menu Dropdown di Blogspot

 Pada seri sebelumnya, kita sudah membahas cara membuat menu navigasi custom di Blogspot.

Di artikel ini, kita lanjut ke tahap berikutnya, yaitu membuat menu dropdown agar navigasi blog terlihat lebih rapi dan profesional.

Menu dropdown sangat berguna jika blog memiliki banyak halaman, label, atau kategori.
Pengunjung jadi lebih mudah menemukan konten tanpa memenuhi header blog.

Catatan jujur:
Contoh menu dropdown yang benar-benar aktif bisa kamu lihat di dummy blog saya:
https://dsimplecraftcikarang.blogspot.com

 Apa Itu Menu Dropdown?

Menu dropdown adalah menu bertingkat.
Saat kursor diarahkan ke menu utama, sub-menu akan muncul secara otomatis.

Menu jenis ini umum dipakai di blog tutorial, resep, dan personal blog dengan banyak topik.

Struktur Dasar Menu Dropdown

Pastikan kamu sudah punya menu navigasi custom seperti di seri pertama.
Struktur HTML dasarnya kurang lebih seperti ini:

<ul class="menu">

  <li><a href="/">Home</a></li>

  <li>

    <a href="#">Tutorial</a>

    <ul class="submenu">

      <li><a href="/search/label/Blogger">Blogger</a></li>

      <li><a href="/search/label/Canva">Canva</a></li>

      <li><a href="/search/label/Website">Website</a></li>

    </ul>

  </li>

  <li><a href="/p/about.html">About</a></li>

</ul>

HTML ini tidak ditempel di Tema, tetapi di HTML gadget menu navigasi yang sudah kamu buat.

 CSS untuk Menu Dropdown

CSS inilah yang membuat submenu tersembunyi dan muncul saat di-hover.
Paste CSS berikut di Tema → Sesuaikan → Tambahkan CSS.

.menu {

  list-style: none;

  padding: 0;

  margin: 0;

}

.menu li {

  position: relative;

  display: inline-block;

}

.menu li a {

  padding: 10px 15px;

  display: block;

}

.submenu {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background: #fff;

  min-width: 180px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.submenu li {

  display: block;

}

 .menu li:hover .submenu {

  display: block;

}

CSS ini aman dan tidak mengubah struktur template utama.
Jika menu tidak muncul, biasanya karena CSS belum tersimpan atau class berbeda.

Tips Agar Menu Dropdown Tidak Bermasalah

Gunakan dropdown hanya untuk menu yang benar-benar perlu.
Terlalu banyak submenu justru membuat navigasi membingungkan.

Uji menu di versi desktop dan mobile.
Beberapa template membutuhkan penyesuaian tambahan untuk layar kecil.

Catatan Penting

Tutorial ini sengaja dibuat bertahap dan jujur.
Tidak semua menu di blog ini menggunakan dropdown karena fokus blog berbeda.

Contoh real digunakan di blog lain agar tidak merusak blog utama.