左侧侧边栏子菜单交互实现：基于HTML&CSS的悬停触发需求

核心需求对应实现 #

• 初始状态隐藏每个<li>左侧的三点按钮
• 鼠标悬停<li>时触发三点按钮显示
• 悬停三点按钮或子菜单时保持子菜单可见，支持点击操作
• 子菜单严格限制在主菜单（侧边栏）范围内

HTML结构 #

<aside class="sidebar">
  <ul class="main-menu">
    <!-- 菜单项示例1 -->
    <li class="menu-item">
      <button class="dots-trigger" aria-label="更多选项">⋮</button>
      <span class="menu-label">仪表盘</span>
      <ul class="submenu">
        <li class="submenu-item">数据概览</li>
        <li class="submenu-item">自定义报表</li>
        <li class="submenu-item">导出数据</li>
      </ul>
    </li>
    <!-- 菜单项示例2 -->
    <li class="menu-item">
      <button class="dots-trigger" aria-label="更多选项">⋮</button>
      <span class="menu-label">用户管理</span>
      <ul class="submenu">
        <li class="submenu-item">添加用户</li>
        <li class="submenu-item">权限设置</li>
        <li class="submenu-item">批量操作</li>
      </ul>
    </li>
  </ul>
</aside>

CSS样式 #

/* 侧边栏容器：固定宽度，作为子菜单定位参照 */
.sidebar {
  width: 280px;
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
  position: relative;
  overflow: visible; /* 确保子菜单不被截断，若需完全内嵌可改为hidden */
}

/* 主菜单基础样式重置 */
.main-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 菜单项：弹性布局，容纳按钮、文本和子菜单 */
.menu-item {
  position: relative;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-item:hover {
  background-color: #e8e8e8;
}

/* 三点按钮：初始透明隐藏，hover时显示 */
.dots-trigger {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.menu-item:hover .dots-trigger {
  opacity: 1;
}

/* 子菜单：初始隐藏，定位在菜单项右侧（侧边栏外但关联范围） */
.submenu {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  min-width: 180px;
  display: none;
  z-index: 10;
}

/* 多场景触发子菜单显示：hover菜单项、hover按钮、hover子菜单本身 */
.menu-item:hover .submenu,
.dots-trigger:hover ~ .submenu,
.submenu:hover {
  display: block;
}

/* 子菜单项交互样式 */
.submenu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submenu-item:hover {
  background-color: #f0f0f0;
}

关键逻辑说明 #

1. 三点按钮显示控制：用opacity替代display: none实现平滑过渡，仅在父菜单项hover时触发显示。
2. 子菜单持久化：同时监听菜单项、按钮、子菜单的hover状态，解决鼠标从按钮移到子菜单时的消失问题。
3. 范围限制：侧边栏设为相对定位，子菜单以菜单项为参照，若需完全内嵌侧边栏，可将子菜单改为垂直展开（设置top: 100%并移除left属性）。
4. 无障碍优化：给三点按钮添加aria-label，适配屏幕阅读器。

备选JS增强方案（复杂场景） #

若需要点击切换子菜单等更灵活的交互，可添加少量JS：

const triggers = document.querySelectorAll('.dots-trigger');
triggers.forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    e.stopPropagation();
    const submenu = trigger.nextElementSibling.nextElementSibling;
    submenu.classList.toggle('show');
  });
});

同时在CSS中添加.submenu.show { display: block; }替代原hover显示逻辑。

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