Open In App

How to show/hide dropdown menu on mouse hover using CSS ?

Last Updated : 06 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
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 Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

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.



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 experience, especially for desktop users. Syntax: .
4 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, Function_out); Approach: The .hover() method is t
2 min read
How to avoid dropdown menu to close menu items on clicking inside ?
The default behavior of a dropdown menu is to close the menu list items when clicked inside. In this article, We will use stropPropagation method to prevent the dropdown menu from closing the menu list. stopPropagation(): The stopPropagation() method is used to stop propagation of event calling i.e. the parent event is called we can stop the propag
2 min read
How to spin text on mouse hover using HTML and CSS?
The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in &lt;li&gt; tag and then using CSS:hover Selector selector we will rotate each alphabet on Y-axis. We will divide this article
2 min read
How to add border to an element on mouse hover using CSS ?
We have given a web page containing elements and the task is to add border to an element on mouse move over (hover) using CSS. When we add a border to an element on hovering the mouse, it affects the position of the other nearest element. To remove this problem, we can use the CSS margin property. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html
1 min read
How to Zoom an Image on Mouse Hover using CSS ?
The image zoom effect is used to apply zoom over an image on mouse hover or click. This type of effect is mostly used in portfolio sites. It is useful in situations where we want to show the user details on the image. CSS transform and scale with TransitionTo achieve image zoom on mouse hover using CSS, you can use the CSS property with the transfo
2 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 CSS, we can easily create such dropdown menus. Ap
3 min read
How to Search for Items in a Dropdown Menu using CSS & JavaScript?
In many web apps, dropdown menus offer a list of options for users. When the list is long, finding a specific item can be hard. To make this easier, we can add a search function to the dropdown menu. In this article we will explore how we can add search functionality in dropdown menu using CSS and JavaScript. Approach:Create a div element to serve
3 min read
Foundation CSS Dropdown Menu JavaScript Reference
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Dropdown Menu is used for displaying an expandable dropdown menu by using the Foundation CSS plug
6 min read
Foundation CSS Dropdown Menu
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
3 min read