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

Detailed explanation of the correct way to open em in CSS

How to implement Hover drop-down menu with CSS

Detailed explanation of the correct way to open em in CSS

VMware Workstation 14 Pro installation Ubuntu 16.04 tutorial

WeChat applet realizes the nine-square grid effect

Detailed explanation of MySQL clustered index and non-clustered index

In-depth explanation of Set and WeakSet collections in ES6

Teach you the detailed process of using Docker to build the Chinese version of gitlab community

Detailed Explanation of JavaScript Framework Design Patterns

Implementing file content deduplication and intersection and difference in Linux

Zen Coding Easy and fast HTML writing

mysql wildcard (sql advanced filtering)

Recommend

jQuery implements breathing carousel

English: A link tag will automatically complete href in IE

Solve the problem of ugly blue border after adding hyperlink to html image img

js to achieve cool fireworks effect

Solutions to browser interpretation differences in size and width and height in CSS

How to install MySQL 8.0.17 and configure remote access

Implementation of whack-a-mole game in JavaScript

A brief understanding of the relevant locks in MySQL

How to delete table data in MySQL

How to align text boxes in multiple forms in HTML

Basic introductory tutorial on MySQL partition tables

Detailed explanation of various types of image formats such as JPG, GIF and PNG

MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)

Tips on disabling IE8 and IE9's compatibility view mode using HTML

Detailed explanation of galera-cluster deployment in cluster mode of MySQL