尝试在单个div中创建多个下拉菜单，但未按预期工作

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

<div class="dropdown">
  <button class="dropdown-btn">菜单2</button>
  <div class="dropdown-content">
    <a href="#">选项4</a>
    <a href="#">选项5</a>
    <a href="#">选项6</a>
  </div>
</div>

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

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

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

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

// 如果需要通过JavaScript来控制下拉菜单的显示和隐藏，可以添加以下代码

var dropdowns = document.getElementsByClassName("dropdown");
var i;

for (i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.getElementsByClassName("dropdown-content")[0];
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}