How to Create a Dropdown Menu with CSS & JavaScript ? Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 ContentUsing only the CSSUsing JavaScript and CSSUsing only the CSSIn 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: Using JavaScript and CSSThis 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> Output: Comment More infoAdvertise with us Next Article How to Create a Dropdown Menu with CSS & JavaScript ? K kokaneit92 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads JavaScript - How to Create Dropdown List? The dropdown list is a toggleable menu that allows to user to choose one option from multiple. The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences.Creating Dr 3 min read How to Create a Dropdown List with Array Values using JavaScript? To add elements to the select element from the JavaScript array, We can also get selected values in the dropdown list using JavaScript. Here we will populate the dropdown list with an array.Below are the methods to create a dropdown list with array values:Table of ContentUsing Pure JavaScriptUsing j 2 min read How To Create A Dropup Menu Using CSS? A Dropup menu is a type of menu in web design that expands upwards from its trigger element instead of the traditional dropdown direction. Dropup menus are often used in contexts such as navigation bars, form selections, and interactive elements.Below are the approaches used for creating the dropup 6 min read How To Create A Cascading Dropdown List Using JavaScript? The Cascading dropdown lists are used to display options in a secondary dropdown based on the selection made in a primary dropdown. This is useful in forms where users need to select categories or locations in the hierarchical manner. For example: selecting a country might reveal states or provinces 3 min read How to Change Tabs on Hover with CSS and JavaScript ? In this article, we are going to learn how can we change tabs on hover, with CSS and JavaScript. Changing tabs on hover enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore diff 4 min read How to Create a Responsive Navigation Bar with Dropdown? Dropdowns in navigation bars are used to organize and display a variety of menu options within a limited screen size. Dropdown allow users to access multiple pages or sections of a website without hampering the interface of a website. We will see how to create a responsive navigation bar with a drop 7 min read How to create a Split Button Dropdown using CSS ? In this article, we will learn how to design a split button dropdown using CSS. Split buttons combine a main button with a dropdown, useful for adding interactive features to your website. This guide helps you improve your web design skills by showing you how to make a split button in easy steps. Ta 4 min read How to Create a Responsive Top Navigation Menu with CSS & JavaScript? Top navigation menus offer users immediate access to key sections of a website. A responsive top navigation menu enhances user experience because if our website is fully responsive then it can be accessible by any device like PC, mobile, or tab. PreviewApproachFirst, create a basic HTML structure fo 5 min read How to Build Accordion Menu using JavaScript ? Accordion is used to render or hide, or toggle the view of the content with the help of adding the collapsible effect. It helps to manage and organize information in a compact and visually appealing manner. Accordion Menu may contain nested accordions, in order to render a large volume of content in 4 min read How to create Popup Box using HTML CSS and JavaScript? Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a 3 min read Like