多层下拉菜单开发求助：一级向下二级向右的实现问题

调整后的HTML结构 #

先确保菜单嵌套层级清晰，每个下拉项用dropdown类标记，子菜单区分层级：

<nav class="main-menu">
  <ul>
    <li class="dropdown">
      <a href="#">一级菜单</a>
      <ul class="submenu level-1">
        <li class="dropdown">
          <a href="#">Item1</a>
          <ul class="submenu level-2">
            <li><a href="#">subitem1</a></li>
            <li><a href="#">subitem2</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">Item2</a>
          <ul class="submenu level-2">
            <li><a href="#">subitem1</a></li>
            <li><a href="#">subitem2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS核心样式实现 #

通过定位和hover选择器解决显示/隐藏问题，实现二级子菜单向右展开：

/* 基础重置：消除默认列表样式 */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  background: #f0f0f0;
  border: 1px solid #ddd;
}

/* 一级菜单横向排列，父元素设为相对定位作为子菜单基准 */
.main-menu > ul > li {
  display: inline-block;
  position: relative;
}

/* 所有子菜单默认隐藏，绝对定位脱离文档流 */
.submenu {
  position: absolute;
  display: none;
  min-width: 150px;
}

/* 一级子菜单向下展开 */
.level-1 {
  top: 100%;
  left: 0;
}

/* 二级子菜单向右展开，对齐父项顶部 */
.level-2 {
  top: 0;
  left: 100%;
}

/* hover父项时，直接子菜单显示 */
.dropdown:hover > .submenu {
  display: block;
}

/* 可选：hover时的视觉反馈 */
.dropdown:hover > a {
  background: #e0e0e0;
}

关键说明 #

• 父元素必须设置position: relative，否则子菜单的绝对定位会基于整个页面
• 使用>直接子选择器，确保只有当前hover项的直接子菜单被触发，避免多层嵌套的误触发
• 二级子菜单通过left:100%实现向右展开，而非默认的向下

备选JavaScript方案（兼容旧浏览器或复杂交互） #

如果需要更灵活的控制，比如兼容IE8及以下，可使用JS监听鼠标事件：

const dropdownItems = document.querySelectorAll('.dropdown');

dropdownItems.forEach(item => {
  // 鼠标进入时显示子菜单
  item.addEventListener('mouseenter', () => {
    const submenu = item.querySelector('.submenu');
    if (submenu) submenu.style.display = 'block';
  });
  
  // 鼠标离开时隐藏子菜单
  item.addEventListener('mouseleave', () => {
    const submenu = item.querySelector('.submenu');
    if (submenu) submenu.style.display = 'none';
  });
});

内容的提问来源于stack exchange，提问作者Stanislav Brož