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
Detailed explanation of the usage of setUp and reactive functions in vue3
1. When to execute setUp We all know that vue3 ca...
How to make a List in CocosCreator
CocosCreator version: 2.3.4 Cocos does not have a...
How to create your own image using Dockerfile
1. Create an empty directory $ cd /home/xm6f/dev ...
Docker and iptables and implementation of bridge mode network isolation and communication operations
Docker provides multiple networks such as bridge,...
How to Install Oracle Java 14 on Ubuntu Linux
Recently, Oracle announced the public availabilit...
Several specific methods of Mysql space cleaning
Table of contents Preface 1. Check the file disk ...
JavaScript basics of this pointing
Table of contents this Method In the object Hidde...
JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)
This article shares the specific code of JavaScri...
How to dynamically modify container port mapping in Docker
Preface: Docker port mapping is often done by map...
How to create a responsive column chart using CSS Grid layout
I have been playing around with charts for a whil...
Detailed explanation of using Alibaba Cloud image repository to build foreign Docker images
Download foreign images using Alibaba Cloud Image...
JavaScript programming through Matlab centroid algorithm positioning learning
Table of contents Matlab Centroid Algorithm As a ...
CentOS 8.0.1905 installs ZABBIX 4.4 version (verified)
Zabbix Server Environment Platform Version: ZABBI...
Pure CSS3 to achieve pet chicken example code
I have read a lot of knowledge and articles about...
Talking about ContentType(s) from image/x-png
This also caused the inability to upload png files...