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:
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
Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging
Copy code The code is as follows: <!-- Prevent...
Django uses pillow to simply set up verification code function (python)
1. Import the module and define a validation stat...
Tutorial on installing Seurat2 and Seurat3 simultaneously using the same version of R in Linux
Seurat is a heavyweight R package for single-cell...
Detailed explanation of Vue form binding and components
Table of contents 1. What is two-way data binding...
Tutorial diagram of installing mysql8.0.18 under linux (Centos7)
1 Get the installation resource package mysql-8.0...
MySql inserts data successfully but reports [Err] 1055 error solution
1. Question: I have been doing insert operations ...
Nginx local directory mapping implementation code example
Sometimes you need to access some static resource...
About the problem of dynamic splicing src image address of img in Vue
Let's take a look at the dynamic splicing of ...
Example of using Docker to build an ELK log system
The following installations all use the ~/ direct...
Summary of practical experience of HTML knowledge points
1. The table tag is table, tr is row, td is cell, ...
Teach you how to build Redis cluster mode and sentinel mode with docker in 5 minutes
Table of contents 1. Preparation Pull the redis i...
Example code for implementing timeline and animation effects using JavaScript (front-end componentization)
Table of contents Code cleaning "Frames"...
How to deploy MySQL and Redis services using Docker
Table of contents How to deploy MySQL service usi...
CSS uses position + margin to achieve the method of horizontal and vertical centering of fixed boxes
margin:auto; + position: absolute; up, down, left...
What are the similarities between the development of web design and western architecture?
History always repeats itself surprisingly well. ...