固定侧边栏菜单右侧下拉子菜单的实现问题

嘿，我明白你想要实现的是多级横向展开的侧边栏下拉菜单——也就是子菜单不在父项下方，而是靠右对齐，二级子菜单再接着在一级子菜单右侧下方排列对吧？这其实是通过CSS的绝对定位就能解决的问题，我帮你调整了HTML结构和CSS代码，你可以直接用：

修改后的HTML结构 #

<div class="sidebar">
  <ul class="menu">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li class="has-submenu">
      <a href="#">Three</a>
      <ul class="submenu">
        <li><a href="#">Three One</a></li>
        <li><a href="#">Three Two</a></li>
      </ul>
    </li>
    <li class="has-submenu">
      <a href="#">Four</a>
      <ul class="submenu">
        <li class="has-submenu">
          <a href="#">Four One</a>
          <ul class="submenu">
            <li><a href="#">Four One A</a></li>
            <li><a href="#">Four One B</a></li>
          </ul>
        </li>
        <li><a href="#">Four Two</a></li>
      </ul>
    </li>
  </ul>
</div>

对应的CSS样式 #

/* 基础侧边栏容器样式 */
.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}

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

.menu li {
  position: relative; /* 核心：让子菜单的绝对定位以当前li为基准 */
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.menu a {
  text-decoration: none;
  color: #333;
  display: block; /* 让链接占满li宽度，扩大hover触发区域 */
}

/* 子菜单默认隐藏 + 绝对定位 */
.submenu {
  display: none;
  position: absolute;
  left: 100%; /* 子菜单对齐到父li的右侧边缘 */
  top: 0; /* 子菜单顶部和父li顶部完全对齐 */
  width: 200px;
  background-color: #f0f0f0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid #ddd;
}

.submenu li {
  border-bottom: 1px solid #ddd;
  position: relative; /* 为二级子菜单提供定位基准 */
}

/* hover时显示直接子菜单 */
.has-submenu:hover > .submenu {
  display: block;
}

/* 二级子菜单的定位规则：和一级子菜单逻辑一致 */
.submenu .has-submenu:hover > .submenu {
  left: 100%;
  top: 0;
}

关键改动说明 #

1. 父元素定位基准：给每个包含子菜单的li添加has-submenu类，并设置position: relative，这样子菜单的绝对定位会绑定到父菜单项，而不是整个页面。
2. 子菜单横向展开：通过left: 100%让子菜单直接出现在父菜单项的右侧，top: 0保证顶部对齐，避免默认的下方堆叠。
3. 多级菜单兼容：二级子菜单继承同样的定位逻辑，所以悬停在Four One上时，它的子菜单也会在右侧展开。
4. 精准hover触发：用>选择器只触发直接子菜单的显示，避免多层菜单意外展开。

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