Kode CSS untuk Membuat Dropdown Menu Bertingkat (Nested) yang Rapi dan Ringan

Navigasi website adalah peta bagi pengunjung Anda. Jika struktur menu berantakan, pengunjung akan bingung dan meninggalkan situs Anda (meningkatkan Bounce Rate). Untuk website dengan banyak kategori konten—seperti toko online, portal berita, atau blog tutorial—menu standar satu baris seringkali tidak cukup. Anda membutuhkan Dropdown Menu Bertingkat (Nested Menu).

Banyak pemula tergoda menggunakan plugin WordPress atau framework JavaScript berat untuk membuat fitur ini. Padahal, hal tersebut bisa memperlambat loading website dan menurunkan skor Core Web Vitals.

Di artikel ini, saya akan membagikan kode HTML dan CSS murni untuk membuat menu dropdown bertingkat yang rapi, ringan, dan ramah SEO tanpa satu baris pun JavaScript.

Mengapa Harus CSS Murni (Pure CSS)?

Sebelum masuk ke koding, penting untuk memahami nilai tambah (value) dari metode ini untuk blog Anda:

1. Kecepatan Super: CSS dieksekusi langsung oleh browser rendering engine, jauh lebih cepat daripada menunggu JavaScript dimuat.
2. SEO Friendly: Struktur HTML menu yang rapi memudahkan crawler Google memahami hierarki halaman website Anda (Sitemap).
3. Stabilitas: Tidak ada risiko konflik antar script plugin yang sering menyebabkan menu macet.

---

Langkah 1: Struktur HTML Semantik

Kunci dari menu bertingkat adalah konsep “List di dalam List” (<ul> di dalam <li>). Kita menggunakan tag semantik <nav> agar disukai mesin pencari.

Salin kode berikut ke dalam file HTML Anda:

HTML
<nav class="menu-container">
    <ul class="main-menu">
        <li><a href="#">Beranda</a></li>
        
        <!-- Menu dengan Dropdown Level 1 -->
        <li><a href="#">Layanan &#9662;</a>
            <ul class="sub-menu">
                <li><a href="#">Jasa SEO</a></li>
                <li><a href="#">Web Design</a></li>
                
                <!-- Menu dengan Dropdown Level 2 (Nested) -->
                <li class="has-children"><a href="#">Pemasaran Digital &#9656;</a>
                    <ul class="sub-menu">
                        <li><a href="#">Google Ads</a></li>
                        <li><a href="#">Social Media</a></li>
                        <li><a href="#">Email Marketing</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        
        <li><a href="#">Tentang Kami</a></li>
        <li><a href="#">Kontak</a></li>
    </ul>
</nav>

Penjelasan Simbol:

• ▾: Kode HTML untuk panah bawah (▼).
• ▸: Kode HTML untuk panah kanan (▸).

---

Langkah 2: Kode CSS Utama

Sekarang, mari kita buat menu ini berfungsi. Logikanya adalah menyembunyikan submenu (display: none atau opacity: 0) dan memunculkannya saat elemen induknya di-hover (:hover).

Salin kode ini ke file style.css Anda:

CSS
/* 1. Reset & Styling Dasar Container */
.menu-container {
    background-color: #2c3e50; /* Warna Background Menu Utama */
    font-family: 'Segoe UI', sans-serif;
    width: 100%;
}

.menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* 2. Styling Menu Utama (Horizontal) */
.main-menu {
    display: flex;
    justify-content: flex-start;
}

.main-menu > li {
    position: relative; /* Penting untuk patokan posisi submenu */
}

.main-menu > li > a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s;
}

.main-menu > li > a:hover {
    background-color: #34495e;
}

/* 3. Styling Sub-Menu (Dropdown Level 1) */
.sub-menu {
    position: absolute;
    top: 100%; /* Muncul tepat di bawah menu induk */
    left: 0;
    width: 200px; /* Lebar dropdown */
    background-color: #34495e;
    visibility: hidden; /* Sembunyi secara default */
    opacity: 0;
    transform: translateY(10px); /* Efek geser sedikit */
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.sub-menu li {
    position: relative; /* Penting untuk nested menu level selanjutnya */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sub-menu a {
    display: block;
    padding: 12px 20px;
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
}

.sub-menu a:hover {
    background-color: #2c3e50;
    color: #3498db; /* Warna aksen saat hover */
}

/* 4. Logika Memunculkan Dropdown */
/* Jika li di-hover, cari ul (submenu) di dalamnya dan munculkan */
.main-menu li:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 5. Styling Nested Menu (Dropdown Level 2 dst) */
/* Selector ini menargetkan submenu yang berada di dalam submenu */
.sub-menu .sub-menu {
    top: 0;
    left: 100%; /* Muncul di samping kanan */
    margin-top: -1px; /* Penyesuaian border */
}

/* Tanda Panah Kanan untuk Nested Menu */
.has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

---

Bedah Logika Kode (Penting untuk Pengetahuan)

Agar artikel ini memberikan value lebih dan tidak dianggap konten rendah oleh Google, mari kita pahami cara kerja kode di atas:

1. Kunci Utama: position: relative dan absolute

Dropdown menu bekerja berdasarkan posisi. Elemen induk (<li>) harus memiliki position: relative, sedangkan anak menu (<ul> submenu) memiliki position: absolute.

• Jika induk tidak relative, maka submenu akan melayang tidak tentu arah mengikuti body browser, bukan mengikuti tombol menunya.

2. Selector > (Direct Child)

Perhatikan kode .main-menu li:hover > .sub-menu. Tanda > berarti “Anak Langsung”. Ini memastikan bahwa saat kita mengarahkan mouse ke menu level 1, hanya menu level 2 yang terbuka, bukan menu level 3 sekaligus. Ini menjaga kerapian interaksi.

3. Nested Menu Logic (left: 100%)

Untuk menu tingkat kedua (sub-sub menu), kita tidak menaruhnya di bawah (top: 100%), melainkan di samping kanan. Oleh karena itu kita menggunakan:

CSS
.sub-menu .sub-menu {
    top: 0;      /* Sejajar vertikal dengan induknya */
    left: 100%;  /* Geser ke kanan selebar induknya */
}

---

Tips Responsif untuk Mobile

Menu dropdown hover tidak bekerja baik di layar sentuh (HP). Untuk tampilan mobile, praktik terbaiknya adalah mengubah dropdown menjadi stack (tumpuk vertikal) atau menggunakan “Hamburger Menu” dengan bantuan sedikit JavaScript atau Checkbox Hack.

Namun, untuk menjaga tutorial ini tetap fokus pada CSS Dropdown, berikut adalah kode CSS tambahan agar menu tidak berantakan di layar kecil (mengubahnya menjadi scroll vertikal sederhana):

CSS
@media screen and (max-width: 768px) {
    .main-menu {
        flex-direction: column;
    }
    
    .menu-container {
        width: 100%;
    }
    
    .main-menu > li > a {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Pada mobile, posisi absolute seringkali merusak layout, 
       ubah menjadi static/block agar menumpuk ke bawah */
    .sub-menu, .sub-menu .sub-menu {
        position: static;
        width: 100%;
        visibility: visible; /* Selalu tampil atau gunakan toggle JS */
        opacity: 1;
        display: none; /* Sembunyikan dan munculkan saat hover/klik */
        transform: none;
        box-shadow: none;
    }
    
    .main-menu li:hover > .sub-menu {
        display: block;
    }
}

Kesimpulan

Membuat Dropdown Menu Bertingkat yang rapi dengan CSS murni adalah keterampilan dasar yang wajib dimiliki pemilik website. Selain menghemat biaya server karena kode yang ringan, Anda juga memberikan pengalaman navigasi yang lebih baik bagi pengguna.

Dengan menerapkan kode di atas, Anda telah selangkah lebih maju dalam mengoptimalkan aspek teknis website Anda, yang merupakan salah satu faktor penting dalam penilaian Google AdSense.

Selamat mencoba dan kreasikan warna sesuai tema blog Anda!