css实现一个下拉框 |暂停css的动画

HTML代码：
<div class="dropdown">
<button class="dropbtn">选择</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>
CSS代码：
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #f1f1f1;
color: black;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 12px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}

首先，大家使用HTML创建了一个div元素，其中包含一个按钮和一个下拉框。按钮的文字是“选择”，下拉框的选项中共有三个选项。这里的div元素使用了“dropdown”类，它是大家自定义的类名，在CSS中用来设置该元素的样式。

然后，大家使用CSS为这个下拉框添加样式。大家将div元素的position属性设置为relative，以使其作为定位元素。按钮的背景颜色为#f1f1f1，字体颜色为黑色，字体大小为16px。大家还使用了:hover伪类，当鼠标悬停在下拉框上时，显示下拉列表。

最后，大家使用“dropdown-content”类设置下拉列表的样式。这个下拉列表最初是隐藏的，当鼠标悬停在按钮上时才会显示出来。选项的文字颜色为黑色，padding属性用于调整选项的长度和宽度。这样，大家的下拉框就完成了！通过这个简单的例子，大家可以学习到如何使用CSS来实现一个下拉框，同时也可以将这个例子作为学习CSS的基础。