Html 使用CSS将列表显示为下拉列表

我正在尝试实现年过滤器的下拉菜单，使用它需要相应地显示内容

预期结果：

以下是脚本：

正文{
字体系列：“Ubuntu”，塔荷马，日内瓦，无衬线；
字体大小：400；
字体大小：15px；
线高：25px；
颜色：#9dabaf；
背景色：#f3f7f9；
字母间距：0px；
}
.ttm标签ul.tabs{
宽度：100%；
保证金：0；
填充：0；
}
.ttm标签ul.tabs li{
显示：内联块；
右边距：5px；
}
.ttm标签ul.tabs li a{
显示：块；
光标：指针；
填充：8px 25px；
边缘底部：5px；
线高：22px；
宽度：自动；
位置：相对位置；
z指数：3；
背景色：透明；
字体大小：14px；
字号：600；
边框：1px实心；
边界半径：0；
文本转换：大写；
}

您必须使用选择框：

2000
2001
2002
2003
2004
2005
2006
2007

您应该在

html

中使用

选择
标记


选择一年：
2000
2001
2002
2003
2004
2005
2006
2007
2008
纯CSS下拉列表，您可以在项目上实现


正文{
颜色：#000000；
字体系列：无衬线；
填充：30px；
背景色：#f6f6f6；
}
a{
文字装饰：无；
颜色：#000000；
}
a:悬停{
颜色：#22222
}
/*下拉列表*/
.下拉列表{
显示：内联块；
位置：相对位置；
}
.dd按钮{
显示：内联块；
边框：1px纯色灰色；
边界半径：4px；
填充：10px 30px 10px 20px；
背景色：#ffffff；
光标：指针；
空白：nowrap；
}
.dd按钮：之后{
内容：''；
位置：绝对位置；
最高：50%；
右：15px；
转化：translateY（-50%）；
宽度：0；
身高：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框顶部：5px纯黑；
}
.dd按钮：悬停{
背景色：#eeeeee；
}
.dd输入{
显示：无；
}
.dd菜单{
位置：绝对位置；
最高：100%；
边框：1px实心#ccc；
边界半径：4px；
填充：0；
保证金：2px0；
盒影：0.0 6px 0 rgba（0,0,0,0.1）；
背景色：#ffffff；
列表样式类型：无；
}
.dd输入+.dd菜单{
显示：无；
}
.dd输入：选中+dd菜单{
显示：块；
}
.dd菜单李{
填充：10px 20px；
光标：指针；
空白：nowrap；
}
.dd菜单li：悬停{
背景色：#f6f6f6；
}
.dd菜单李a{
显示：块；
利润率：-10px-20px；
填充：10px 20px；
}
.dd菜单li.divider{
填充：0；
边框底部：1px实心#CCCC；
}

选择年份

2000年
2001年
2002年


2003


2004


我们可以利用给定的CSS类吗？可以！您可以更新类并使用它，但是如果您想从列表中搜索和选择下拉列表，您必须添加第三方库，或者在选择特定年份时使用JavaScription：它应该显示特定年份并最小化列表&我希望使用CSS类，因为它具有依赖性。