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

在前端开发中，我们可以使用HTML、CSS和JavaScript来创建下拉菜单。下面是一种实现在单个div中创建多个下拉菜单的方法：

HTML结构：

<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>

CSS样式：

.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代码（可选）：

// 如果需要通过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";
    }
  });
}

这段代码创建了两个下拉菜单，每个菜单都包含一个按钮和一个下拉内容区域。通过CSS样式设置下拉内容区域的初始状态为隐藏，当鼠标悬停在按钮上时，通过CSS样式将下拉内容区域显示出来。

如果需要通过JavaScript来控制下拉菜单的显示和隐藏，可以使用上述提供的JavaScript代码。该代码为每个下拉菜单的按钮添加了一个点击事件监听器，当按钮被点击时，切换下拉内容区域的显示状态。

这种方法可以在单个div中创建多个下拉菜单，并且每个下拉菜单都具有独立的按钮和下拉内容区域。可以根据实际需求进行样式和功能的定制。

腾讯云相关产品和产品介绍链接地址：