HTML+CSS实现下拉菜单的实现
1.下拉列表实例
代码如下：
<!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>下拉列表</span>
<div class="downbtn">
<ul>
<li><a href="#">下拉列表01</a></li>
<li><a href="#">下拉列表02</a></li>
<li><a href="#">下拉列表03</a></li>
<li><a href="#">下拉列表04</a></li>
<li><a href="#">下拉列表05</a></li>
</ul>
</div>
</div>
</body>
</html>
效果图如下：
2.技术要点
下拉菜单需边的子菜单隐藏（使用display:none;将元素隐藏） 鼠标悬浮样式（div:hover） 父元素相对定位（position:relative;） 子元素绝对定位（position:absolute;）
相关文章
Laurie
2020-11-30
Efia
2020-11-23
Valora
2021-03-03
Pandora
2023-04-19
Tani
2023-04-19
Tanisha
2023-04-19
Nissa
2023-04-20
Kande
2023-05-02
Olivia
2023-05-02
Anna
2023-05-06
Summer
2023-05-12
Malinda
2023-05-13
Crystal
2023-05-13
Kara
2023-05-15
Thalia
2023-05-17
Tani
2023-07-10
Diane
2023-07-10
Sabah
2023-07-20