怎么用ul和li写下拉选择框

下面是使用 `ul` 和 `li` 写下拉选择框的例子：

<div class="dropdown">
  <button class="dropbtn">下拉框</button>
  <ul class="dropdown-content">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
    <li><a href="#">选项4</a></li>
  </ul>
</div>

这里使用了一个 `div` 元素来包裹下拉选择框的按钮和选项，其中按钮使用了一个 `button` 元素，选项则使用了一个 `ul` 元素和多个 `li` 元素。

接下来是 CSS 样式：

/* 隐藏下拉框中的选项 */
.dropdown-content {
  display: none;
}

/* 设置下拉框按钮的样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
}

/* 设置下拉框中的选项的样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 当鼠标悬停在选项上时，改变其背景颜色 */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* 显示下拉选项 */
.show {
  display: block;
}

这个样式中，我们使用了 `.dropdown-content` 类来隐藏下拉框中的选项，使用了 `.dropbtn` 类来设置下拉框按钮的样式，使用了 `.dropdown-content a` 来设置下拉框中选项的样式，并使用了 `.show` 类来控制选项的显示。

最后，我们需要使用一些 JavaScript 代码来实现下拉选择框的交互功能：

// 获取下拉框中的元素
var dropdown = document.getElementsByClassName("dropdown");

// 遍历所有下拉框
for (var i = 0; i < dropdown.length; i++) {
  // 当点击下拉框按钮时
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

这个 JavaScript 代码会为每个下拉选择框的按钮添加一个点击事件，当点击按钮时，会切换 `.active` 类，并根据 `.dropdown-content` 元素的当前状态来显示或隐藏选项。