HTML+CSS to achieve drop-down menu
|
1. Drop-down list example The code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
body{
text-align:center;
}
.header{
display:inline-block;
position:relative;
background-color:#4CAF50;
}
.header:hover .downbtn{
display:block;
background-color: #f1f1f1;
}
.header:hover{
background-color: #3e8e41;
}
.header span{
padding:15px;
line-height:61px;
cursor:pointer;
color: white;
}
.header .downbtn{
display:none;
position:absolute;
background-color:#f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
min-width: 160px;
}
.header .downbtn li{
line-height:30px;
text-align:left;
padding-left:5px;
}
.header .downbtn a:hover{
text-decoration:underline;
color:#f00;
}
.header .downbtn a{
display:block;
color:black;
width:100%;
}
</style>
</head>
<body>
<div class="header">
<span>Drop-down list</span>
<div class="downbtn">
<ul>
<li><a href="#">Drop-down list 01</a></li>
<li><a href="#">Drop-down list 02</a></li>
<li><a href="#">Drop-down list 03</a></li>
<li><a href="#">Drop-down list 04</a></li>
<li><a href="#">Drop-down list 05</a></li>
</ul>
</div>
</div>
</body>
</html>
The effect diagram is as follows:
2. Technical points
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: W3C Tutorial (12): W3C Soap Activity
>>: Where is the project location deployed by IntelliJ IDEA using Tomcat?
Recommend
Analysis of the Principles of MySQL Slow Query Related Parameters
MySQL slow query, whose full name is slow query l...
Detailed explanation of MySQL Group by optimization
Table of contents Standard execution process opti...
Example of using mycat to implement MySQL database read-write separation
What is MyCAT A completely open source large data...
Detailed tutorial for installing winx64 under mysql8.0.18 (with pictures and text)
Go to https://dev.mysql.com/downloads/mysql/ to d...
Summary of common problems in downloading and installing MySQL 5.7 on Win7 64-bit
1. Download MySQL from the official website: This...
Detailed explanation of jquery tag selector application example
This article example shares the specific code of ...
Summary of Textarea line break issues in HTML
Recently, I encountered a problem of whether the d...
How to configure SSL certificate in nginx to implement https service
In the previous article, after using openssl to g...
IE8 Beta 1 has two areas that require your attention
<br />Related articles: Web skills: Multiple...
Vue3 draggable left and right panel split component implementation
Table of contents Breaking down components Left P...
Memcached method for building cache server
Preface Many web applications store data in a rel...
Scary Halloween Linux Commands
Even though it's not Halloween, it's wort...
How to implement encryption and decryption of sensitive data in MySQL database
Table of contents 1. Preparation 2. MySQL encrypt...
How to build an ELK log system based on Docker
Background requirements: As the business grows la...
MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10
Win10 system locally installed MySQL8.0.20, perso...