Membuat Menu Dropdown dengan CSS

Jan 2, 2024

—

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Menu Dropdown</title>
    <style>
        /* Styling untuk menu utama */
        .menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
        }

        .menu li {
            display: inline-block;
        }

        .menu li a {
            display: block;
            color: #333;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .menu li a:hover {
            background-color: #ddd;
        }

        /* Styling untuk menu dropdown */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: #333;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#">Beranda</a></li>
        <li class="dropdown">
            <a href="#">Produk</a>
            <div class="dropdown-content">
                <a href="#">Produk 1</a>
                <a href="#">Produk 2</a>
                <a href="#">Produk 3</a>
            </div>
        </li>
        <li><a href="#">Tentang Kami</a></li>
        <li><a href="#">Kontak</a></li>
    </ul>
</body>
</html>

HTML

Output:

Anda dapat menggunakan kode di atas untuk membuat menu dropdown elegan dan responsif di situs web Anda. Jangan lupa untuk menyesuaikan konten dan tautan menu sesuai dengan kebutuhan Anda.

Semoga bermanfaat!

Membuat Menu Dropdown dengan CSS

Artikel Terbaru ⭐