How to implement Hover drop-down menu with CSS

As usual, today I will talk about a very practical CSS effect. When the mouse moves to the button, a drop-down menu will be automatically displayed. The effect is as follows:

Please add a description of the image

A very simple demo, the implementation steps are as follows:

First, define a large div to wrap a button and a link group, and set the styles of the two elements under the div respectively. a connection group is hidden to set the hover effect of each part. Note here

/* .dropdown's hover effect, acting on .dropdown-content*/
      .dropdown:hover .dropdown-content {
          display: block;
      }

Finally, attach the source code:

<!DOCTYPE html>
<html>

<head>
    <title>Drop-down menu example</title>
    <meta charset="utf-8">
    <style>
        body {
            margin: auto;
        }
        
        .dropbtn {
            background-color: #4CAF50;
            color: #fff;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        
        .dropdown {
            left: 47%;
            /* Declare it as relative positioning, the following sub-elements can refer to this element*/
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            /* Hide the element */
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }
        
        /* .dropdown's hover effect, acting on .dropdown-content*/
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .dropdown:hover .dropbtn {
            background-color: #3dc741;
        }
    </style>
</head>

<body>

    <h2 style="text-align: center;">Drop-down menu</h2>
    <p style="text-align: center;">Move the mouse over the button to open the drop-down menu</p>

    <div class="dropdown">
        <button class="dropbtn">Drop-down menu</button>
        <div class="dropdown-content">
            <a href="#" target="_block">Hello World 1</a>
            <a href="#" target="_block">Hello World 2</a>
            <a href="#" target="_block">Hello World 3</a>
        </div>
    </div>

</body>

</html>

This is the end of this article about how to implement the Hover drop-down menu with CSS. For more relevant CSS Hover drop-down menu content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Three ways to create a gray effect on website images

>>: Difference between varchar and char types in MySQL

How to implement Hover drop-down menu with CSS

Summary of MySQL usage specifications

How to install mysql8.0.23 under win10 and solve the problem of "the service does not respond to the control function"

jQuery implements font size adjustment case

Pay attention to the use of HTML tags in web page creation

MySQL Series 14 MySQL High Availability Implementation

Detailed explanation of the implementation process of Nginx log timing splitting in CentOS 7

Introduction to TypeScript interfaces

jQuery implements all selection and reverse selection operation case

10 Popular Windows Apps That Are Also Available on Linux

How to make the height of child div fill the remaining space of parent container in CSS

Recommend

How to view the creation time of files in Linux

Detailed process of FastAPI deployment on Docker

Summary of Mathematical Symbols in Unicode

Basic principles of MySQL scalable design

WeChat applet implements calculator function

Specific use of MySQL operators (and, or, in, not)

How to cancel the background color of the a tag when it is clicked in H5

Automatic backup of MySQL database using shell script

Detailed tutorial on installing Docker on CentOS 7.5

MySQL 8.0.20 Installation Tutorial with Pictures and Text (Windows 64-bit)

An article to understand the advanced features of K8S

Rules for using mysql joint indexes

js to achieve 3D carousel effect

Docker-compose creates a bridge, adds a subnet, and deletes a network card

Nginx defines domain name access method