Cara Membuat Menu HTML dan Submenu

Menu tarik turun, atau suckerfish menu, memanfaatkan kombinasi HTML dan CSS (Cascading Style Sheets) untuk struktur dan gaya. Bagian HTML biasanya berupa senarai tidak teratur (<ul>) dan sub-senarai berlapis. Setelah bar navigasi utama dan pautan dipaparkan dalam CSS, sub-senarai disusun sebagai submenu. Selektor :hover membolehkan submenu tersembunyi berubah kepada display: block supaya ia muncul semula.

Langkah 1: Strukturkan Menu di HTML

Gunakan <ul> dan <li> untuk menyusun pautan:

<ul id="menu">
  <li>Pautan 1</li>
  <li>Pautan 2</li>
  <li>Pautan 3</li>
</ul>

Tambahkan div .clearfix sebelum tutup senarai bagi memastikan latar belakang menu meluas secara betul.

Langkah 2: Tambah Submenu

Masukkan senarai tidak teratur baru di dalam <li> induk:

<ul id="menu">
  <li>Pautan 1</li>
  <li>Pautan 2
    <ul>
      <li>Sub 1</li>
      <li>Sub 2</li>
      <li>Sub 3</li>
    </ul>
  </li>
  <li>Pautan 3</li>
</ul>

Langkah 3: Sediakan Fail CSS

Hilangkan titik dan indentasi kiri pada senarai utama:

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

Langkah 4: Warna Latar Belakang

#menu {
  list-style: none;
  padding: 0;
  background-color: #00008B; /* biru gelap */
}

Langkah 5: Susun Elemen Secara Menegak

#menu li { float: left; }

Langkah 6: Gaya Pautan Menu

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

Langkah 7: Gaya Submenu

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

Langkah 8: Hilangkan Float Submenu

#menu ul li { clear: left; }

Langkah 9: Tersembunyi dan Dipaparkan Submenu

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

Tambahkan juga .clearfix { clear: both; } pada div yang bersesuaian.

Tips Tambahan

• Berikan penyorotan kepada pautan ketika dihover: #menu a:hover { background-color: #555; }
• Setelah menu siap, pertimbangkan menambah plugin jQuery untuk animasi tarik turun yang lebih menarik.