How to Create a Dropdown Menu with CSS & JavaScript ?

Last Updated : 05 Mar, 2024

A dropdown menu is a common user interface element that allows users to select from a list of options. It is often used in navigation bars or forms to conserve space and provide a clean user experience. Creating a dropdown menu involves a combination of CSS for styling and JavaScript for interactivity.

There are several approaches to creating dropdown menus, but two common methods are:

Table of Content

Using only the CSS
Using JavaScript and CSS

Using only the CSS

In this approach, the dropdown functionality is achieved using only CSS without the need for JavaScript. This is done by utilizing the :hover pseudo-class to toggle the visibility of the dropdown menu content.

Example: The below code implements the CSS properties to create a dropdown menu.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <style>
        .dropdown {
            left: 40%;
            text-align: center;
            position: relative;
            display: inline-block;
        }
 
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            min-width: 160px;
            z-index: 1;
        }
 
        .dropdown:hover .dropdown-content {
            display: block;
        }
 
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
 
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
 
<body>
    <div class="dropdown">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            Hover the below text to see the 
            <br/>content of the dropdown menu.
        </h2>
        <span>
            Toggle Dropdown
        </span>
        <div class="dropdown-content">
            <a href="#item1">Item 1</a>
            <a href="#item2">Item 2</a>
            <a href="#item3">Item 3</a>
        </div>
    </div>
</body>
 
</html>

Output:

dropMenuGIF

Using JavaScript and CSS

This approach involves using CSS for styling and JavaScript to control the dropdown’s behavior. JavaScript is used to toggle the visibility of the dropdown content, allowing for more control over the dropdown’s appearance and behavior.

Examples: The below code example uses JavaScript and CSS to create a dropdown menu.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <style>
        .dropdown {
            left: 40%;
            text-align: center;
            position: relative;
            display: inline-block;
        }
 
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
 
        .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-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
 
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
    <title>Dropdown Example</title>
</head>
 
<body>
 
    <div class="dropdown">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            Click the below button to see the
            <br />dropdown menu.
        </h2>
        <button onclick="toggleDropdown()" class="dropbtn">
            Click me
        </button>
        <div id="myDropdown" class="dropdown-content">
            <a href="#">Option 1</a>
            <a href="#">Option 2</a>
            <a href="#">Option 3</a>
        </div>
    </div>
 
    <script>
        function toggleDropdown() {
            const dropdownContent =
                document.getElementById("myDropdown");
            if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
            } else {
                dropdownContent.style.display = "block";
            }
        }
 
        window.onclick = function (event) {
            if (!event.target.matches('.dropbtn')) {
                const dropdowns =
                    document.getElementsByClassName
                        ("dropdown-content");
                for (let i = 0; i < dropdowns.length; i++) {
                    const openDropdown = dropdowns[i];
                    if (openDropdown.style.display === "block") {
                        openDropdown.style.display = "none";
                    }
                }
            }
        }
    </script>
 
</body>
 
</html>