Langkah-langkah Membuat Menu Dropdown dan Submenu

Langkah-langkah Membuat Menu Dropdown dan Submenu

Menu dropdown, juga dikenal sebagai “suckerfish”, dibangun dengan kombinasi HTML dan CSS. Bagian HTMLnya terdiri dari daftar <ul> dan <li> bersarang. Setelah menyusun struktur, CSS digunakan untuk menata tampilan dan menampilkan submenu saat kursor berada di atas item induk menggunakan selector :hover.

Langkah 1: Menulis Struktur Menu

Gunakan tag <ul> dan <li> untuk membuat menu utama.

<ul id='menu'>
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
</ul>

Tambahkan <div class='clearfix'></div> sebelum menutup tag <ul> untuk memastikan latar belakang menu meluas.

Langkah 2: Menambahkan Submenu

Masukkan daftar ul baru di dalam elemen li yang menjadi induk.

<ul id='menu'>
  <li>Link 1</li>
  <li>Link 2<
    <ul>
      <li>Sublink 1</li>
      <li>Sublink 2</li>
      <li>Sublink 3</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>

Langkah 3: Styling Dasar Menu

Hapus bullet dan indentasi.

#menu{list-style:none;padding:0;}

Langkah 4: Warna Latar Belakang

#menu{background-color:#003366;}

Langkah 5: Susun Item Menjadi Horizontal

#menu li{float:left;}

Langkah 6: Menata Link Menu

#menu li a{display:block;padding:8px 15px;text-align:center;color:#fff;font-weight:bold;text-decoration:none;}

Langkah 7: Menata Submenu

#menu ul{position:absolute;list-style:none;padding:0;display:none;}

Langkah 8: Hapus Float pada Item Submenu

#menu ul li{clear:left;}

Langkah 9: Menampilkan Submenu saat Hover

#menu li:hover ul{display:block;}

Tambahkan .clearfix{clear:both;} pada div.clearfix.

Tips Tambahan

• Highlight item saat hover: #menu a:hover{background-color:#004080;}
• Untuk animasi yang lebih menarik, gunakan plugin jQuery seperti jQuery UI atau Slick.