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
Solve the problem that line-height=height element height but text is not vertically centered
Let me first explain why the text is not vertical...
The whole process of installing mysql5.7.22 under ARM64 architecture
MySQL download address: https://obs.cn-north-4.my...
Use href in html to pop up a file download dialog box when clicking a link
I learned a new trick today. I didn’t know it befo...
How to uninstall MySQL 8.0 version under Linux
1. Shut down MySQL [root@localhost /]# service my...
Analyze how to automatically generate Vue component documentation
Table of contents 1. Current situation 2. Communi...
Example code of CSS layout at both ends (using parent's negative margin)
Recently, during the development process, I encou...
Solution to forgetting mysql password under linux
The problem is as follows: I entered the command ...
Case study of dynamic data binding of this.$set in Vue
I feel that the explanation of this.$set on the I...
Web page HTML ordered list ol and unordered list ul
Lists for organizing data After learning so many ...
How to make a tar file of wsl through Docker
I've been playing with the remote development...
The order of event execution in the node event loop
Table of contents Event Loop Browser environment ...
Detailed explanation of how to install PHP7 on Linux
How to install PHP7 on Linux? 1. Install dependen...
Mini Program to Implement Text Circular Scrolling Animation
This article shares the specific code of the appl...
Mysql online recovery of undo table space actual combat record
1 Mysql5.6 1.1 Related parameters MySQL 5.6 adds ...
MySQL decimal unsigned update negative numbers converted to 0
Today, when verifying the concurrency problem of ...