HTML代码：
<div class="menu">
<button class="menuButton">选择一个选项</button>
<ul class="menuList">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li><a href="#">选项4</a></li>
</ul>
</div>
CSS代码：
.menu {
position: relative;
display: inline-block;
}
.menuButton {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.menuButton:hover {
background-color: #3e8e41;
}
.menuList {
position: absolute;
top: 100%;
left: 0;
margin-top: 5px;
padding: 0;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
display: none;
}
.menuList li {
display: block;
}
.menuList li a {
color: black;
padding: 10px;
text-decoration: none;
display: block;
}
.menuList li a:hover {
background-color: #f2f2f2;
}
.menu:hover .menuList {
display: block;
}在上面的代码中，大家使用了
元素将下拉菜单包裹，并使用了