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下拉框。