1. 文本下拉菜单
2.按钮下拉菜单
1. 文本下拉菜单
效果：当鼠标放在文字上时，出现下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.下拉菜单</title>
<style>
/* 鼠标放的地方 */
.dropdown{
position: relative;
display: block;
}
.dropdown-content{
/* 内容隐藏 */
display: none;
position: absolute;
background-color: beige;
/* 显示出阴影 */
box-shadow:0px 1px 2px 0px bisque;
}
/* 组合选择器 */
.dropdown:hover .dropdown-content{
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>here!</span>
<div class="dropdown-content">
<span>can you see me?</span>
</div>
</div>
</body>
</html>
2.按钮下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单2.0</title>
<style>
/* 设置button的样式 */
button{
margin:0;
padding: 0;
background-color: cornflowerblue;
border: 0;
font-size: 20px;
}
button:hover{
background-color:gainsboro;
}
button:active{
background-color: cornsilk;
}
ul{
/* 隐藏 */
display: none;
margin:0;
padding: 0;
/* 去掉列表圆点 */
list-style-type:none;
/* 相对于父元素的定位，可以尝试一下没有这个的效果 */
position: absolute;
background-color: honeydew;
}
/* 组合选择器 */
button:hover ul{
display: block;
}
a{
text-decoration: 0;
color: black;
padding: 5px;
}
</style>
</head>
<body>
<button>下拉菜单
<!-- div 也可以有同样的效果 -->
<ul>
<li><a href="#">content111111111</a></li>
<li>content2</li>
<li>content3</li>
</ul>
</button>
</body>
</html>