二级按钮下拉菜单失效求助，仅支持按钮和div实现方案

你说的完全正确，问题根源就是那行.dropdown-content:hover > .dropdown-content的CSS选择器——它的触发逻辑根本不成立。因为你的二级下拉菜单初始状态是display: none，用户根本没法悬停在一个看不见的元素上，这就导致这个hover规则永远不会生效，反而可能因为样式的层级冲突让你的二级按钮一直显示。

下面给你一个纯按钮+div的实现方案，完全符合你的需求，不用列表、链接或Bootstrap：

第一步：调整HTML结构 #

先把嵌套的下拉容器和按钮结构理清楚，避免类名重复导致的样式混乱：

<!-- 父级下拉容器 -->
<div class="dropdown">
  <button class="dropdown-btn">主菜单</button>
  <!-- 一级下拉内容 -->
  <div class="dropdown-panel">
    <button class="dropdown-btn">Random Stuff 3.1</button>
    <!-- 二级下拉内容 -->
    <div class="dropdown-subpanel">
      <button class="dropdown-btn">二级选项A</button>
      <button class="dropdown-btn">二级选项B</button>
    </div>
  </div>
</div>

第二步：编写正确的CSS #

核心是把hover事件绑定到可见的父元素上，而不是隐藏的子元素：

/* 父级容器：负责定位下拉面板 */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 10px;
}

/* 所有下拉按钮的基础样式 */
.dropdown-btn {
  padding: 10px 18px;
  border: none;
  background-color: #f5f5f5;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* 一级下拉面板：默认隐藏 */
.dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 二级下拉面板：默认隐藏，定位在一级面板右侧 */
.dropdown-subpanel {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 160px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 悬停父容器时，显示一级下拉面板 */
.dropdown:hover .dropdown-panel {
  display: block;
}

/* 悬停一级面板里的按钮时，显示二级下拉面板 */
.dropdown-panel .dropdown-btn:hover + .dropdown-subpanel {
  display: block;
}

/* 可选：二级面板hover时保持显示（避免鼠标移开按钮就消失） */
.dropdown-subpanel:hover {
  display: block;
}

/* 按钮hover效果，提升交互感 */
.dropdown-btn:hover {
  background-color: #e0e0e0;
}

关键逻辑说明 #

1. 避免类名重复：用.dropdown（容器）、.dropdown-panel（一级下拉）、.dropdown-subpanel（二级下拉）区分不同层级，防止样式互相干扰。
2. 正确的触发条件：
   • 一级下拉：当鼠标悬停在父容器.dropdown上时显示（覆盖按钮+容器区域，交互更友好）
   • 二级下拉：当鼠标悬停在一级下拉的按钮上时显示，同时给二级面板加hover保持显示，避免鼠标从按钮移到二级选项时菜单消失。
3. 定位合理：二级下拉用left: 100%和top: 0让它在一级菜单右侧弹出，符合用户的常规操作习惯。

如果你坚持要使用你原来的.dropdown-content类名（虽然不推荐，容易混淆），可以把CSS改成下面这样：

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

/* 子级下拉默认隐藏 */
.dropdown-content > .dropdown-content {
  display: none;
  position: absolute;
  min-width: 150px;
  top: 0;
  left: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 悬停父级可见元素时，显示子级下拉 */
.dropdown-content:hover > .dropdown-content {
  display: block;
}

但这种方式要注意父级.dropdown-content必须是inline-block，否则hover区域会异常，而且嵌套层级多了容易出布局问题。

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