CSS 下拉列表样式模板是一种常用的 web 设计元素，可以为用户提供方便的下拉选择功能。下拉列表常常用于表单中，例如国家、地区、年龄等选项。在这篇文章中，我们将介绍如何创建 CSS 下拉列表样式模板，并使用 pre 标签展示对应的代码。

.dropdown {
position: relative;
display: inline-block;
}
.dropdown select {
display: none;
}
.dropdown .select-option {
display: block;
padding: 12px 22px;
font-size: 16px;
font-weight: 600;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 4px;
cursor: pointer;
}
.dropdown .select-option.selected {
background-color: #668EFF;
color: #FFFFFF;
}
.dropdown .select-option:hover {
background-color: #EFEFEF;
}
.dropdown select option {
font-size: 16px;
font-weight: 600;
}
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 99;
display: none;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 4px;
}
.dropdown.show .dropdown-menu {
display: block;
}
.dropdown .dropdown-menu li {
display: block;
padding: 6px 12px;
font-size: 16px;
font-weight: 600;
color: #000000;
cursor: pointer;
}
.dropdown .dropdown-menu li:hover {
background-color: #EFEFEF;
}
.dropdown .dropdown-menu li.selected {
background-color: #668EFF;
color: #FFFFFF;
}

上述代码展示了一个简单的下拉列表模板，包含了下拉选项的样式和下拉菜单的样式。其中，.select-option 样式定义了下拉选项的默认样式和选中状态样式，.dropdown-menu 样式定义了下拉菜单的位置和样式。同时，通过使用 .show 类来实现下拉菜单的显示。这个模板可以通过添加其他样式来进一步进行个性化设计。