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
React implements dynamic pop-up window component
When we write some UI components, if we don't...
MYSQL slow query and log settings and testing
1. Introduction By enabling the slow query log, M...
MySQL cursor functions and usage
Table of contents definition The role of the curs...
Nodejs-cluster module knowledge points summary and example usage
The interviewer will sometimes ask you, tell me h...
Comprehensive summary of Vue3.0's various listening methods
Table of contents Listener 1.watchEffect 2.watch ...
Detailed explanation of Vue two-way binding
Table of contents 1. Two-way binding 2. Will the ...
Sample code using vue-router in html
Introducing vue and vue-router <script src=&qu...
Detailed explanation of jQuery's core functions and event handling
Table of contents event Page Loading Event Delega...
What you need to understand about MySQL locks
1. Introduction MySQL locks can be divided into g...
Detailed description of the use of advanced configuration of Firewalld in Linux
IP masquerading and port forwarding Firewalld sup...
MySQL 5.7.24 compressed package installation and configuration method graphic tutorial
This article shares the installation tutorial of ...
Meta declaration annotation steps
Meta declaration annotation steps: 1. Sort out all...
Calculation of percentage value when the css position property is absolute
When position is absolute, the percentage of its ...
Vue3 based on script setup syntax $refs usage
Table of contents 1. Vue2 syntax 2. Use of Vue3 1...
A brief discussion on how Tomcat breaks the parent delegation mechanism
Table of contents JVM Class Loader Tomcat class l...