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 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 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 create a dropdown menu in Bootstrap ? A dropdown menu offers a list of alternatives when clicked or hovered on, which is a clean method of providing a list of alternatives as only one option is displayed initially onto the screen. Drop-down menus are used in almost all types of software nowadays to show sub-options of the option. Step 1 2 min read How to style a dropdown using CSS? We will learn how to style the dropdown list using CSS and explore its implementation through examples. Dropdown menus are commonly used to allow users to select an option from a predefined list. Styling them properly can enhance your website's user experience and visual appeal.What is a <select 3 min read How to create a form within dropdown menu using Bootstrap ? A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some use 3 min read Create A Custom Select Menu with Search Box using HTML CSS and JavaScript This article will show you how to create a custom select menu with a search box using HTML, CSS, and JavaScript. First, we create an option list for the select box, and we can search for text in the text input box. The search result displays the matched option value. Additionally, we have added a "c 5 min read Like