How to show/hide dropdown menu on mouse hover using CSS ? Last Updated : 06 Jun, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report The approach of this article is to show and hide the dropdown menu on mouse hover using CSS. The task can be done by using the display property and :hover selector. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to Show Hide Dropdown Using CSS </title> <style> ul { padding: 0; list-style: none; background: #f2f2f2; width: 500px; } ul li { display: block; position: relative; line-height: 21px; text-align: left; } ul li a { display: block; padding: 8px 25px; color: #333; text-decoration: none; } ul li a:hover { color: #fff; background: #939393; } ul li ul.dropdown { min-width: 100%; /* Set width of the dropdown */ background: #f2f2f2; display: none; position: absolute; z-index: 999; left: 0; } ul li:hover ul.dropdown { display: block; /* Display the dropdown */ } </style> </head> <body> <h1> GeeksForGeeks </h1> <h2> How to show and hide dropdown menu on mouse hover using CSS? </h2> <ul> <li> <a href="#">Programming languages</a> <ul class="dropdown"> <li><a href="#">C++</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">PHP</a></li> </ul> </li> </ul> </body> </html> Output: Supported Browsers are listed below: Google ChromeInternet ExplorerFirefoxOperaSafari HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples. CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples. Comment More infoAdvertise with us Next Article How to Display Element on Hover using CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Make Menu Dropdown on Hover using Bootstrap ? Menu Dropdown on Hover using Bootstrap involves customizing Bootstrap's dropdown component to display menus when hovering over the trigger, not clicking. This is achieved by modifying CSS classes, such as adding "dropdown" and "dropdown-menu" to respective elements, providing a more intuitive user e 4 min read How to design a dropdown menu using pure CSS ? The Dropdown Menu is a common UI pattern that we have seen on the web nowadays. It is useful in displaying related information in pieces without overwhelming the user with buttons, texts, and options. Most of the time it is seen inside the navigation bar or headers of websites. With the help of Pure 3 min read How to open dropdown menu on hover in Bootstrap ? Here is the task to open the dropdown menu on hover in Bootstrap. The dropdown on mouseover can be done using the following methods. Using the jQuery hover() method: It is used to specify two functions to start when mouse pointer move over the selected element. Syntax: $(selector).hover(Function_in, 3 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 Display Element on Hover using CSS ? In web development, displaying an element on hover is a common interaction pattern used to reveal additional content or actions. Below are the various CSS approaches to achieve this effect: Table of Content Using the display propertyUsing the visibility propertyUsing the display propertyThis approac 2 min read How to display div elements using Dropdown Menu in jQuery? In order to display data/content of a specific element by selecting the particular dropdown menu in jQuery, we can use the with following ways: Using hide() and show() methods: hide() methods : This method is used to hiding the syntax or the element of html that you want to hide. Syntax: $(selector) 4 min read Like