How to implement Hover drop-down menu with CSS

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

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

Recommend

Windows Server 2008 R2 Multi-User Remote Desktop Connection Licensing

At work, we often need remote servers and often e...

W3C Tutorial (4): W3C XHTML Activities

HTML is a hybrid language used for publishing on ...

JavaScript object-oriented class inheritance case explanation

1. Object-oriented class inheritance In the above...

Detailed explanation of vue-router 4 usage examples

Table of contents 1. Install and create an instan...

How to manually upgrade the kernel in deepin linux

deepin and Ubuntu are both distributions based on...

How to add color mask to background image in CSS3

Some time ago, during development, I encountered ...

A small piece of HTML code will include the Baidu search bar in your page

<html> <head> <meta http-equiv=&quo...

Detailed explanation of the idea of ​​implementing password display and hiding function in Vue

Effect: Ideas: Use the input type attribute to di...

Vue realizes the logistics timeline effect

This article example shares the specific code of ...

A quick solution to the problem of PC and mobile adaptation

When making a web page, we usually need to consid...

Tomcat Server Getting Started Super Detailed Tutorial

Table of contents 1. Some concepts of Tomcat –1, ...

mysql is not an internal command error solution

The error "mysql is not an internal command&...

Vue project implements graphic verification code

This article example shares the specific code of ...

Linux file management command example analysis [display, view, statistics, etc.]

This article describes the Linux file management ...

Detailed explanation of redis5 cluster construction and usage under Linux (Centos7)

Table of contents 1. Brief description 2. Steps t...