Home Coding Cara Mudah Membuat Dropdown Menu dengan HTML CSS

Cara Mudah Membuat Dropdown Menu dengan HTML CSS

Farhan Hidayat 16 April 2026 7 min read

Masih bingung cara membuat dropdown menu yang rapi dan enak dilihat? Tenang, kamu nggak sendirian. Banyak pemula sering merasa kesulitan di bagian ini, padahal sebenarnya cukup simpel kalau sudah tahu alurnya. Di artikel ini, kamu akan belajar cara membuat dropdown menu dengan HTML CSS secara praktis, tanpa ribet, dan langsung bisa dipakai di website kamu.

Sebelum masuk ke praktik, kita pahami dulu dasarnya. Dropdown menu adalah menu navigasi yang akan menampilkan daftar tambahan saat pengguna melakukan hover atau klik. Biasanya, menu ini sering muncul di bagian navbar.

Selain itu, menu navigasi punya peran penting dalam struktur website. Pertama, menu ini membantu merapikan tampilan karena tidak semua item ditampilkan sekaligus. Kedua, pengguna jadi lebih mudah menjelajahi halaman. Dengan kata lain, pengalaman pengguna (UX) jadi lebih baik.

Sebagai contoh, kamu pasti sering melihat dropdown di menu kategori toko online atau dashboard aplikasi. Nah, konsepnya sama seperti itu.

Also Read: 7 Animasi Teks CSS Otomatis yang Bikin Website Lebih Hidup

Meskipun terlihat sederhana, ada beberapa masalah yang sering muncul. Misalnya, dropdown tidak muncul saat di-hover. Selain itu, posisi menu kadang berantakan atau bahkan keluar dari layout.

Di sisi lain, banyak juga yang terlalu bergantung pada JavaScript, padahal HTML dan CSS saja sudah cukup untuk kebutuhan dasar. Bahkan, masalah lain yang sering terjadi adalah dropdown tidak responsif saat dibuka di HP.

Karena itu, penting untuk memahami struktur dan styling dari awal.

Also Read: Cara Membuat Loading Spinner CSS Simple & Responsif

Sekarang kita masuk ke bagian utama, yaitu praktik langsung. Ikuti langkah berikut supaya hasilnya rapi dan berfungsi dengan baik.

1. Struktur Dasar HTML

Pertama, kita buat struktur HTML-nya dulu. Biasanya, dropdown menu menggunakan elemen <ul> dan <li>.

<ul class="menu">
  <li>
    Menu
    <ul class="dropdown">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
</ul>

Dengan struktur ini, kamu sudah punya dasar dropdown yang siap di-style.

Also Read: 10 Card UI HTML CSS untuk Landing Page yang Responsif & Modern

2. Styling Dasar dengan CSS

Selanjutnya, kita rapikan tampilannya dengan CSS.

.menu {
  list-style: none;
}

.menu li {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  list-style: none;
}

Di tahap ini, kita mengatur posisi dan menghilangkan tampilan default list.

Agar dropdown muncul, kamu bisa gunakan pseudo-class :hover.

Also Read: 5 Template Footer Website Profesional Gratis & Siap Digunakan

.menu li:hover .dropdown {
  display: block;
}

Dengan cara ini, dropdown akan muncul saat kursor diarahkan ke menu utama.

4. Menambahkan Efek Transisi

Supaya tampilannya lebih halus, kamu bisa menambahkan animasi sederhana.

.dropdown {
  transition: all 0.3s ease;
}

Hasilnya, dropdown terasa lebih smooth dan modern.

Also Read: Cara Membuat Toggle Dark Mode HTML CSS JS yang Responsif

Setelah mengikuti langkah sebelumnya, sekarang kamu bisa langsung lihat hasil dropdown menu yang sudah jadi. Dengan tampilan ini, menu jadi lebih rapi, modern, dan langsung bisa kamu gunakan di navbar website.

Preview :

Bayangkan menu utama seperti ‘Services’, lalu saat kamu hover, dropdown menampilkan pilihan seperti Item 1, Item 2, dan Item 3 dengan efek halus di bawahnya.

Silakan langsung copy dan gunakan:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown UI</title>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: linear-gradient(135deg, #2c3e50, #4b6cb7);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CONTAINER */
.wrapper {
  width: 950px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 15px 35px;
  align-items: center;
}

.menu {
  display: flex;
  gap: 30px;
  list-style: none;
}

.menu li {
  position: relative;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  color: #333;
}

/* ACTIVE SERVICES */
.menu li.services {
  background: #2d6cdf;
  color: #fff;
}

/* DROPDOWN */
.dropdown {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #fff;
  width: 230px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  padding: 10px 0;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent #fff;
}

.menu li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown li {
  padding: 12px 20px;
  font-size: 14px;
  transition: 0.2s;
}

.dropdown li:hover {
  background: #f1f5ff;
  color: #2d6cdf;
}

/* BUTTON */
.btn {
  background: #2d6cdf;
  color: white;
  padding: 8px 20px;
  border-radius: 8px;
}

/* HERO */
.hero {
  height: 260px;
  background: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470') center/cover;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 30px;
}

.hero button {
  background: #2d6cdf;
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
}

/* CARDS */
.cards {
  display: flex;
  gap: 15px;
  padding: 20px;
}

.card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.card h4 {
  margin-bottom: 5px;
}

.card p {
  font-size: 13px;
  color: #777;
}
</style>
</head>

<body>

<div class="wrapper">

  <!-- NAVBAR -->
  <div class="navbar">
    <ul class="menu">
      <li>Home</li>
      <li>About</li>

      <li class="services">
        Services ▾
        <ul class="dropdown">
          <li>Web Development</li>
          <li>UI/UX Design</li>
          <li>SEO Optimization</li>
        </ul>
      </li>

      <li>Contact</li>
    </ul>

    <div class="btn">Contact</div>
  </div>

  <!-- HERO -->
  <div class="hero">
    <button>Learn More</button>
  </div>

  <!-- CARDS -->
  <div class="cards">
    <div class="card">
      <h4>Feature 1</h4>
      <p>Lorem ipsum dolor sit amet</p>
    </div>

    <div class="card">
      <h4>Feature 2</h4>
      <p>Lorem ipsum dolor sit amet</p>
    </div>

    <div class="card">
      <h4>Feature 3</h4>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>

</div>

</body>
</html>

Kesalahan yang Sering Terjadi

Agar kamu tidak mengulang kesalahan umum, perhatikan beberapa hal ini:

Tidak menggunakan position: relative pada parent
Salah menargetkan selector CSS
Lupa mengatur z-index sehingga dropdown tertutup elemen lain
Mengandalkan hover tanpa mempertimbangkan pengguna mobile

Dengan menghindari kesalahan ini, kamu bisa menghemat banyak waktu debugging.

Supaya hasilnya makin optimal, kamu bisa terapkan beberapa tips berikut:

Gunakan desain yang clean dan tidak terlalu ramai
Tambahkan animasi secukupnya agar tetap ringan
Pastikan menu responsif dengan bantuan media query
Susun struktur HTML dengan rapi agar mudah dikembangkan

Selain itu, kamu juga bisa mencoba variasi seperti dropdown berbasis klik untuk versi mobile.

Kesimpulan

Sekarang kamu sudah paham cara membuat dropdown menu dengan HTML CSS dari nol. Mulai dari struktur HTML, styling dasar, sampai efek tambahan, semuanya bisa kamu buat tanpa JavaScript.

Yang terpenting, pahami konsepnya dulu, lalu praktikkan secara bertahap. Dengan begitu, kamu bisa membuat menu navigasi yang tidak hanya berfungsi, tetapi juga enak dilihat dan nyaman digunakan.