求助：鼠标悬停一二级子菜单时保持父菜单高亮（SCSS）

Hey，我来帮你搞定这个多级菜单的高亮问题！你遇到的两个核心痛点——父菜单在子菜单悬停时失去高亮、不同层级链接颜色不一致，其实都可以通过调整SCSS的选择器逻辑和样式统一来解决。下面是具体的方案：

• 父级高亮失效：你之前可能只给<a>标签加了:hover样式，当鼠标从父菜单移到子菜单时，<a>的:hover状态消失，但父<li>其实还处于hover状态（因为子菜单是它的后代），所以我们要利用父<li>的hover状态来控制<a>的高亮。
• 链接颜色不一致：大概率是不同层级的<a>标签被单独设置了样式，导致基础颜色或高亮颜色不统一，需要统一所有菜单链接的基础样式。

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;

  // 统一所有菜单链接的基础样式，从根上避免颜色差异
  a {
    text-decoration: none;
    padding: 0 1rem;
    color: #333; // 默认文本颜色，可自定义
    transition: color 0.2s ease; // 平滑过渡提升体验
    display: block; // 扩大点击/悬停区域
    line-height: 2.5; // 垂直居中对齐
  }

  li {
    position: relative; // 为子菜单的绝对定位提供基准
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;

    // 关键：当父li被hover时（包括鼠标在子菜单上），自身的a标签保持高亮
    &:hover > a {
      color: #ff4081; // 高亮颜色，替换成你需要的色值
      font-weight: bold;
    }

    // 一级子菜单样式
    .submenu-level1 {
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      border: 1px solid #eee;
      list-style: none;
      padding: 0.5rem 0;
      min-width: 180px;
      display: none; // 默认隐藏

      // 父li hover时显示一级子菜单
      @at-root .menu li:hover & {
        display: block;
      }

      li {
        display: block;
        height: auto;

        // 二级子菜单样式
        .submenu-level2 {
          position: absolute;
          top: 0;
          left: 100%;
          background: #fff;
          border: 1px solid #eee;
          list-style: none;
          padding: 0.5rem 0;
          min-width: 180px;
          display: none;

          // 一级子菜单的li hover时显示二级子菜单
          @at-root .submenu-level1 li:hover & {
            display: block;
          }

          // 二级链接高亮，和父级保持视觉统一
          a:hover {
            color: #ff4081;
            font-weight: bold;
          }
        }

        // 一级子菜单链接高亮，和父级一致
        a:hover {
          color: #ff4081;
          font-weight: bold;
        }
      }
    }
  }
}

• 统一链接基础样式：把所有<a>的默认样式放在.menu a下，不管是父菜单还是子菜单的链接，都继承这套基础样式，从根源解决颜色不一致的问题。
• 父级高亮逻辑调整：用li:hover > a替代a:hover来控制父菜单链接的高亮——只要鼠标在父<li>的范围内（包括它的子菜单），父链接就会保持高亮，完美解决鼠标移到子菜单后父级失效的问题。
• 子菜单显示控制：用@at-root配合父选择器，既保持了SCSS的嵌套结构清晰，又能精准控制子菜单的显示时机。
• 层级高亮统一：一级、二级子菜单的链接高亮样式和父菜单完全一致，确保整个菜单的视觉风格统一。

• 确保子菜单是父<li>的直接后代元素，这样父<li>的hover状态才能覆盖子菜单的hover场景。
• 不要给子菜单设置pointer-events: none，否则会导致父<li>的hover状态失效。
• 可以根据你的设计需求，调整高亮颜色、过渡时长、字体权重等属性，让菜单更贴合你的项目风格。

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