如何制作一個(gè)帶有下拉的CSS搜索框

在CSS中，我們可以使用position屬性來制作一個(gè)帶有下拉的搜索框，以下是一個(gè)簡單的示例：

HTML部分：

<div class="search-box">
  <input type="text" name="search" placeholder="搜索...">
  <div class="search-drop">
    <div class="search-item">搜索結(jié)果1</div>
    <div class="search-item">搜索結(jié)果2</div>
    <div class="search-item">搜索結(jié)果3</div>
  </div>
</div>

CSS部分：

.search-box {
  position: relative;
  width: 200px;
  height: 30px;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px;
}
.search-drop {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px;
  background-color: #fff;
  z-index: 1;
}
.search-item {
  padding: 5px;
  border-bottom: 1px solid #000;
}

在這個(gè)示例中，search-box是搜索框的容器，search-drop是搜索結(jié)果的下拉菜單，search-item則是每個(gè)搜索結(jié)果，通過position: absolute;和top: 100%;，我們可以讓下拉菜單在搜索框的下方，通過z-index: 1;，我們可以確保下拉菜單在搜索框的上方。