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

要創建純 CSS 下拉框，我們需要用到一些基本的 HTML 元素，包括div,ul,li,a,label,input等。以下是一個基本的 HTML 結構：

<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="#">選項 1</a></li>
<li><a href="#">選項 2</a></li>
<li><a href="#">選項 3</a></li>
</ul>
</div>

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

接下來我們需要使用 CSS 將這個基本的 HTML 結構轉換成一個漂亮的下拉框。以下是一個基本的 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等。這些選擇器用于控制下拉框的樣式、選項的樣式及其動態效果。

通過上述 HTML 和 CSS，我們可以輕松地創建一個簡單、漂亮、響應式的純 CSS 下拉框。