css下拉列表手风琴样式

CSS下拉列表手风琴样式是一种常见的网页设计效果，可以实现多个选项在一个下拉菜单内的交互展示。手风琴样式主要是通过CSS控制菜单项的展开和收缩效果。

<!-- HTML结构 -->
<div class="accordion">
  <div class="item">
    <h3 class="title">标题1</h3>
    <p class="content">内容1</p>
  </div>
  <div class="item">
    <h3 class="title">标题2</h3>
    <p class="content">内容2</p>
  </div>
</div>

<!-- CSS样式 -->
.accordion {
  display: flex;
  flex-direction: column;
}
.item {
  margin-bottom: 10px;
}
.title {
  background-color: #ccc;
  padding: 5px;
  cursor: pointer;
}
.content {
  padding: 10px;
  display: none;
}
.title.active {
  background-color: #aaa;
}
.title.active + .content {
  display: block;
} 

以上代码实现了一个基本的手风琴样式。HTML部分使用div包裹整个手风琴，每个选项对应一个div.item标签，包括一个标题和内容。CSS部分则针对标题和内容分别控制背景颜色、文本样式以及展开和收缩的效果。在实现手风琴效果时，根据CSS选择器，当用户点击标题时，对应内容区域的display属性会从"none"改为"block"，实现展开的效果。