CSS下拉列表是網頁設計和開發中非常重要的元素之一，它可以讓用戶快速方便地選擇他們需要的選項，從而提高用戶體驗和網站功能的易用性。下面將介紹如何使用CSS來實現下拉列表。

<div class="dropdown">
<button class="btn">下拉列表</button>
<ul class="dropdown-menu">
<li class="dropdown-item">選項一</li>
<li class="dropdown-item">選項二</li>
<li class="dropdown-item">選項三</li>
</ul>
</div>

首先，我們創建了一個 div 包含了一個按鈕和一個無序列表。按鈕用于觸發下拉列表的顯示和隱藏，而無序列表中的列表項則是下拉列表中的選項內容。

接著我們使用 CSS 來定義下拉列表的樣式：

.dropdown {
position: relative;
display: inline-block;
}
.dropdown .btn {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background-color: #f1f1f1;
margin-top: 5px;
padding: 0;
list-style-type: none;
display: none;
}
.dropdown .dropdown-menu li {
padding: 10px;
cursor: pointer;
}
.dropdown .dropdown-menu li:hover {
background-color: #ccc;
}
.dropdown.show .dropdown-menu {
display: block;
}

在 CSS 中，我們定義了 .dropdown 類來設置下拉列表的屬性。這個類包含了按鈕和下拉列表本身，使它們作為一個整體來控制。.dropdown .btn 類用來設置按鈕的樣式和 .dropdown .dropdown-menu 類用來設置下拉列表的樣式。最后，我們使用了一個名為 .show 的類來表示下拉列表的顯示狀態。

現在我們已經定義了下拉列表的 HTML 和 CSS 來實現它的樣式。在 JS 中，我們使用以下代碼來控制下拉列表的顯示和隱藏：

var dropdown = document.querySelector('.dropdown');
var menu = dropdown.querySelector('.dropdown-menu');
var btn = dropdown.querySelector('.btn');
btn.addEventListener('click', function() {
dropdown.classList.toggle('show');
});
menu.addEventListener('click', function(e) {
var target = e.target;
if (target.classList.contains('dropdown-item')) {
btn.innerText = target.innerText;
dropdown.classList.remove('show');
}
});

最后，我們在 JS 中使用事件監聽器來為按鈕和下拉列表的列表項添加點擊事件來實現下拉列表的功能。我們為按鈕添加了一個 click 事件，當按鈕被點擊時，我們添加或刪除 .show 類來顯示或隱藏下拉列表。我們為列表項添加了 click 事件，當單擊列表項時，我們更新按鈕文本并從 .show 類中移除下拉列表。

以上是使用 CSS 創建下拉列表的步驟和代碼。通過這種方法，我們可以輕松地在網頁中添加下拉列表并為用戶提供更方便的交互體驗。