純 CSS 下拉框 (Dropdown) 是一種常見的用戶界面元素，它允許用戶在一組預(yù)定義的選項(xiàng)中進(jìn)行選擇。在本文中，我們將介紹如何使用純 CSS 創(chuàng)建下拉框。

要?jiǎng)?chuàng)建純 CSS 下拉框，我們需要用到一些基本的 HTML 元素，包括div,ul,li,a,label,input等。以下是一個(gè)基本的 HTML 結(jié)構(gòu)：

<div class="dropdown">
<input type="checkbox" id="checkbox" class="dropdown-checkbox">
<label for="checkbox" class="dropdown-label">下拉框</label>
<ul class="dropdown-menu">
<li><a href="#">選項(xiàng) 1</a></li>
<li><a href="#">選項(xiàng) 2</a></li>
<li><a href="#">選項(xiàng) 3</a></li>
</ul>
</div>

上述代碼包含一個(gè)帶有類名為dropdown的div元素，其中包含一個(gè)帶有類名為dropdown-checkbox的input元素和一個(gè)帶有類名為dropdown-label的label元素，以及一個(gè)帶有類名為dropdown-menu的ul元素。下拉菜單的選項(xiàng)由帶有li和a元素的子項(xiàng)目組成。

接下來(lái)我們需要使用 CSS 將這個(gè)基本的 HTML 結(jié)構(gòu)轉(zhuǎn)換成一個(gè)漂亮的下拉框。以下是一個(gè)基本的 CSS 樣式：

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-checkbox {
display: none;
}
.dropdown-label {
display: block;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #333;
background-color: #ccc;
cursor: pointer;
}
.dropdown-checkbox:checked + .dropdown-label {
background-color: #999;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
padding: 0;
margin: 0;
list-style: none;
background-color: #fff;
border: 1px solid #999;
box-shadow: 2px 2px 4px gray;
}
.dropdown-checkbox:checked ~ .dropdown-menu {
display: block;
}
.dropdown-menu li {
display: block;
}
.dropdown-menu li a {
display: block;
padding: 5px 10px;
font-size: 16px;
text-decoration: none;
color: #333;
}
.dropdown-menu li a:hover {
background-color: #f8f8f8;
}

上述 CSS 樣式包含了一系列的選擇器和屬性，用于控制下拉框和其子元素的樣式。選擇器包括.dropdown,.dropdown-checkbox,.dropdown-label,.dropdown-menu,.dropdown-checkbox:checked,.dropdown-checkbox:checked ~ .dropdown-menu,.dropdown-menu li,.dropdown-menu li a等。這些選擇器用于控制下拉框的樣式、選項(xiàng)的樣式及其動(dòng)態(tài)效果。

通過(guò)上述 HTML 和 CSS，我們可以輕松地創(chuàng)建一個(gè)簡(jiǎn)單、漂亮、響應(yīng)式的純 CSS 下拉框。