dropdown menu html css Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/dropdown-menu-html-css/ Thu, 16 Apr 2026 10:39:06 +0000 id hourly 1 https://wordpress.org/?v=6.9.4 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png dropdown menu html css Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/dropdown-menu-html-css/ 32 32 Cara Mudah Membuat Dropdown Menu dengan HTML CSS https://farhanhidayat.com/cara-mudah-membuat-dropdown-menu-dengan-html-css/ https://farhanhidayat.com/cara-mudah-membuat-dropdown-menu-dengan-html-css/#respond Thu, 16 Apr 2026 10:39:06 +0000 https://farhanhidayat.com/?p=2429 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. […]

Artikel Cara Mudah Membuat Dropdown Menu dengan HTML CSS pertama kali tampil pada Farhanhidayat.com.

]]> 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.

Apa Itu Dropdown Menu dan Kenapa Penting?

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.

Masalah yang Sering Terjadi Saat Membuat Dropdown Menu

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.

Cara Membuat Dropdown Menu dengan HTML CSS

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.

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.

3. Menampilkan Dropdown Saat Hover

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

.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.

Contoh Hasil Dropdown Menu (Full Code Siap Pakai)

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.

Full Code menu navigasi (HTML + CSS)

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.

Tips Biar Dropdown Menu Lebih Maksimal

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.

FAQ

Apakah menu navigasi bisa dibuat tanpa JavaScript?

Bisa. Kamu cukup menggunakan HTML dan CSS, terutama pseudo-class seperti :hover.

Kenapa menu navigasi tidak muncul?

Biasanya karena kesalahan di CSS, seperti display, position, atau selector yang tidak tepat.

Bagaimana cara membuat menu navigasi responsive?

Gunakan media query dan ubah interaksi dari hover menjadi klik agar lebih nyaman di perangkat mobile.

Kalau kamu ingin memperdalam pemahaman tentang dropdown menu dan CSS, kamu bisa cek beberapa referensi berikut:

  • Dokumentasi CSS lengkap di MDN
  • Tutorial dropdown menu di W3Schools
  • Contoh interaktif di CodePen

Kalau kamu ingin memahami lebih dalam tentang SEO dan WordPress, kamu bisa melihat panduan resminya di situs seperti WordPress dan Google.

Namun, kalau kamu ingin hasil cepat tanpa ribet, kamu bisa langsung menggunakan layanan yang kami sediakan.

ArtikelPro

Artikel Cara Mudah Membuat Dropdown Menu dengan HTML CSS pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/cara-mudah-membuat-dropdown-menu-dengan-html-css/feed/ 0