效果如图所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.dropdown {
position: relative;
width: 100px;
height:30px;
background-color: aqua;
}
ul li {
list-style: none;
width: 100px;
height: 30px;
background-color: greenyellow;
border: 1px solid gray;
}
.dropdown ul {
display: none;
width: 102px;
height: 96px;
position: absolute;
left: 0;
top: 30px;
}
.dropbutton {
width: 102px;
height: 30px;
border: 1px solid greenyellow;
}
.dropdown:hover ul {
display: block;
}
.dropbutton:hover {
background-color: pink
}
ul li:hover {
background-color: azure;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbutton">下拉菜单</button>
<ul>
<li>菜鸟教程1</li>
<li>菜鸟教程2</li>
<li>菜鸟教程3</li>
</ul>
</div>
</body>
</html>
3300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
