如果你喜欢在线购物，你肯定用过淘宝。淘宝网站上有太多物品，要找到你需要的物品可能需要一点时间。为了帮助用户方便地浏览商品，淘宝网站有一个下拉排序功能。下面我们来介绍如何用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");
}
});

现在我们有了一个简单而美观的下拉排序选项，就像淘宝网站上有的一样。