如果你喜歡在線購物，你肯定用過淘寶。淘寶網站上有太多物品，要找到你需要的物品可能需要一點時間。為了幫助用戶方便地瀏覽商品，淘寶網站有一個下拉排序功能。下面我們來介紹如何用CSS實現仿淘寶下拉排序。

首先，我們需要在HTML代碼中創建一個選擇框，并添加選項。在這個選擇框中，我們可以選擇自己想要的排序方式。

<select name="sort" id="sort">
<option value="default">默認排序</option>
<option value="price_asc">價格升序</option>
<option value="price_desc">價格降序</option>
<option value="sales">銷量</option>
</select>

接下來，我們需要設計CSS樣式。我們將選擇框設置為相對定位，以便在下面添加排序選項。

#sort {
position: relative;
z-index: 1;
}

然后，我們通過偽元素和絕對定位添加下拉框。此外，我們需要為下拉框設置動畫以實現良好的用戶體驗。

#sort::after {
content: "";
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
width: 0;
height: 0;
border: 0.3rem solid transparent;
border-top-color: #333;
transition: all 0.2s ease-in-out;
}
#sort.open::after {
transform: translateY(-50%) rotate(180deg);
}
.sort-options {
position: absolute;
top: 100%;
right: 0;
max-height: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
opacity: 0;
z-index: 0;
}
.sort-options ul {
list-style: none;
background-color: #fff;
box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.15);
border-radius: 0.3rem;
padding: 0.5rem;
}
.sort-options li {
margin: 0.5rem 0;
}
#sort.open + .sort-options {
max-height: 20rem;
opacity: 1;
z-index: 1;
}

最后，我們需要使用JavaScript為選擇框添加交互。我們將給選擇框添加一個類名，以便在點擊時呈現它的排序選項。我們還需要用事件監聽器來切換打開和關閉類名。

const sortSelect = document.querySelector("#sort");
const sortOptions = document.querySelector(".sort-options");
sortSelect.addEventListener("click", function() {
sortSelect.classList.toggle("open");
});
window.addEventListener("click", function(e) {
if (!sortSelect.contains(e.target)) {
sortSelect.classList.remove("open");
}
});

現在我們有了一個簡單而美觀的下拉排序選項，就像淘寶網站上有的一樣。