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

Last Updated : 25 Nov, 2020

The approach of this article is to show and hide 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;
        }
  
        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>