css 制作下拉列表

使用 HTML 和 CSS 制作基础下拉列表

HTML 结构：

<div class="dropdown">
  <button class="dropdown-btn">选择选项</button>
  <div class="dropdown-content">
    <a href="#">选项 1</a>
    <a href="#">选项 2</a>
    <a href="#">选项 3</a>
  </div>
</div>

CSS 样式：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

添加悬停和点击交互效果

如果需要点击触发下拉菜单，可以结合 JavaScript：

document.querySelector('.dropdown-btn').addEventListener('click', function() {
  document.querySelector('.dropdown-content').classList.toggle('show');
});

对应的 CSS 调整：

.dropdown-content.show {
  display: block;
}

自定义下拉箭头图标

通过 CSS 伪元素添加箭头：

.dropdown-btn::after {
  content: "▼";
  margin-left: 5px;
  font-size: 12px;
}

响应式下拉菜单

确保下拉菜单在小屏幕上正常显示：

@media (max-width: 600px) {
  .dropdown-content {
    width: 100%;
  }
}

使用纯 CSS 实现选择框样式

如果需要模拟 <select> 元素：

<div class="custom-select">
  <select>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
  </select>
</div>

CSS 样式：

.custom-select {
  position: relative;
  width: 200px;
}

.custom-select select {
  width: 100%;
  padding: 10px;
  appearance: none;
  -webkit-appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
  border: 1px solid #ccc;
  border-radius: 4px;
}

注意事项

• 使用 z-index 确保下拉菜单覆盖其他元素。
• 通过 box-shadow 增强下拉菜单的视觉层次感。
• 测试不同浏览器的兼容性，尤其是 appearance: none 属性。

以上方法可以根据需求灵活调整样式和交互行为。