css3下拉框怎么做

CSS3下拉框的制作非常简单，只需几行代码就能轻松实现。

/*html*/
<div class="select">
<span class="value">请选择</span>
<ul class="options">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
/*css*/
.select {
position: relative;
display: inline-block;
}
.select .value {
display: block;
padding: 10px;
background-color: #f2f2f2;
border-radius: 5px;
cursor: pointer;
}
.select .options {
position: absolute;
top: 100%;
left: 0;
display: none; /*默认隐藏下拉框*/
min-width: 100%;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
z-index: 1; /*控制下拉框在最上层*/
}
.select .options li {
list-style: none;
margin: 5px 0;
padding: 5px;
background-color: #fff;
border-radius: 5px;
cursor: pointer;
}
.select:hover .options {
display: block; /*鼠标悬停展开下拉框*/
}

以上代码中，先使用一个div元素作为容器，包含一个文本元素和一个选项列表。默认情况下，选项列表使用absolute定位并隐藏。

在鼠标悬停时，利用:hover伪类将选项列表展开。通过这样的方式，我们便成功实现了一个简单的CSS3下拉框。

查看更多关于css3下拉框怎么做的详细内容...