求助：如何用按钮和Div实现导航栏嵌套下拉菜单（非列表/Bootstrap）

嘿，我帮你搞定这个嵌套下拉菜单的问题！你想用按钮+div实现、不用列表/链接/Bootstrap的思路完全没问题，之前的代码主要是缺了触发下拉的交互逻辑和几个关键的CSS设置，我给你修正并完善了完整的可运行代码：

完整HTML结构 #

<div class="dropdown">
  <button class="dropdown-btn">主菜单</button>
  <div class="dropdown-content">
    <button class="dropdown-btn">子菜单1</button>
    <div class="dropdown-content">
      <button class="dropdown-btn">嵌套子菜单1-1</button>
      <div class="dropdown-content">
        <button>深层选项1</button>
        <button>深层选项2</button>
      </div>
      <button>子选项1-2</button>
    </div>
    <button class="dropdown-btn">子菜单2</button>
    <div class="dropdown-content">
      <button>子选项2-1</button>
      <button>子选项2-2</button>
    </div>
    <button>普通选项</button>
  </div>
</div>

核心CSS样式 #

/* 基础样式重置，避免默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主下拉容器 - 设置相对定位，让内部绝对定位的下拉内容基于它定位 */
.dropdown {
  position: relative;
  float: left;
  background: #fff;
  margin: 10px;
}

/* 下拉按钮样式 */
.dropdown-btn {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-align: left;
  width: 100%;
}

.dropdown-btn:hover {
  background: #e0e0e0;
}

/* 下拉内容容器 - 初始隐藏，添加过渡动画 */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
  z-index: 1000; /* 确保下拉菜单在最上层 */
}

/* 嵌套下拉菜单的位置调整 - 从父菜单右侧弹出 */
.dropdown-content .dropdown-content {
  top: 0;
  left: 100%;
}

/* Hover触发下拉显示 */
.dropdown:hover > .dropdown-content {
  visibility: visible;
  opacity: 1;
}

/* 普通选项按钮样式 */
.dropdown-content button:not(.dropdown-btn) {
  padding: 10px 20px;
  border: none;
  background: white;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.dropdown-content button:not(.dropdown-btn):hover {
  background: #f5f5f5;
}

关键知识点说明 #

• 相对定位的作用：每个.dropdown都设置position: relative，这样内部的.dropdown-content（绝对定位）才能以父容器为基准定位，不会乱跑。
• 平滑过渡效果：用visibility和opacity配合过渡动画，比直接用display: none/block更流畅，因为display属性不支持过渡。
• 嵌套菜单定位：通过.dropdown-content .dropdown-content设置left: 100%和top: 0，让嵌套菜单从父菜单的右侧弹出，符合常规下拉逻辑。
• Hover触发逻辑：用> 子选择器确保只有当前hover的下拉容器的直接子内容会显示，避免多层嵌套时的误触发。

可选：点击触发下拉（替代Hover） #

如果需要点击按钮触发下拉而不是鼠标hover，可以添加这段简单的JavaScript：

// 给所有下拉按钮绑定点击事件
document.querySelectorAll('.dropdown-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免点击子按钮时关闭父菜单
    const content = this.nextElementSibling;
    // 切换当前下拉菜单的显示状态
    const isVisible = content.style.visibility === 'visible';
    content.style.visibility = isVisible ? 'hidden' : 'visible';
    content.style.opacity = isVisible ? '0' : '1';
    
    // 关闭其他打开的下拉菜单
    document.querySelectorAll('.dropdown-content').forEach(item => {
      if(item !== content) {
        item.style.visibility = 'hidden';
        item.style.opacity = '0';
      }
    });
  });
});

// 点击页面空白处关闭所有下拉菜单
document.addEventListener('click', function() {
  document.querySelectorAll('.dropdown-content').forEach(item => {
    item.style.visibility = 'hidden';
    item.style.opacity = '0';
  });
});

内容的提问来源于stack exchange，提问作者Frank