CSS下拉框是一种常用的网页元素，它允许用户从一组选项中选择一个选项。在这个项目中，我们将学习如何创建一个简单的CSS下拉框。

/* 下拉框容器样式 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉框按钮样式 */
.dropdown button {
background-color: #ffffff;
border: none;
color: #000000;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
/* 下拉框选项样式 */
.dropdown ul {
position: absolute;
z-index: 1;
list-style: none;
margin-top: 0;
padding: 0;
background-color: #ffffff;
width: 100%;
border: 1px solid #000000;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* 下拉框选项hover样式 */
.dropdown li:hover {
background-color: #f2f2f2;
}
/* 下拉框选项样式 */
.dropdown ul li {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
/* 下拉框选项展开样式 */
.show {
max-height: 300px;
}

下面是HTML代码，包括一个下拉框和几个选项。

选项
选项1
选项2
选项3

最后，我们需要编写一些JavaScript代码，当用户点击下拉框按钮时，展开选项列表。

现在，我们已经创建了一个简单的CSS下拉框。用户可以单击下拉框按钮并选择一个选项。