css 制作下拉列表

使用 <select> 和 <option> 创建基础下拉列表

HTML 提供了原生下拉列表控件，通过 <select> 和 <option> 标签实现：

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

自定义下拉列表样式

原生下拉列表样式有限，可以通过 CSS 自定义外观：

select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  font-size: 16px;
  width: 200px;
}

使用 CSS 和 JavaScript 创建高级下拉菜单

如需完全自定义下拉菜单，可以结合 CSS 和 JavaScript：

<div class="custom-dropdown">
  <button class="dropdown-toggle">选择选项</button>
  <ul class="dropdown-menu">
    <li data-value="option1">选项1</li>
    <li data-value="option2">选项2</li>
    <li data-value="option3">选项3</li>
  </ul>
</div>

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

.dropdown-toggle {
  padding: 8px 16px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  cursor: pointer;
  width: 200px;
  text-align: left;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  background-color: white;
  display: none;
}

.dropdown-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f0f0f0;
}

添加交互功能

使用 JavaScript 实现下拉菜单的显示/隐藏功能：

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  const menu = document.querySelector('.dropdown-menu');
  menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
});

document.querySelectorAll('.dropdown-menu li').forEach(item => {
  item.addEventListener('click', function() {
    document.querySelector('.dropdown-toggle').textContent = this.textContent;
    document.querySelector('.dropdown-menu').style.display = 'none';
  });
});

使用 CSS :focus-within 实现纯 CSS 下拉菜单

不需要 JavaScript 的解决方案：

<div class="pure-css-dropdown">
  <button class="dropdown-btn">选择选项</button>
  <ul class="dropdown-list">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

.pure-css-dropdown {
  position: relative;
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background: white;
  border: 1px solid #ddd;
}

.pure-css-dropdown:focus-within .dropdown-list {
  display: block;
}

.dropdown-btn {
  padding: 8px 16px;
  background: #f8f8f8;
  border: 1px solid #ccc;
  cursor: pointer;
}

响应式下拉菜单设计

确保下拉菜单在不同设备上表现良好：

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

  .dropdown-toggle {
    width: 100%;
  }
}