如何用CSS替代SCSS实现Codepen模板中的Mega-menu（规避:hover）

当然没问题！完全可以用纯CSS实现你想要的Mega-menu，不用依赖SCSS。你提到的SCSS里的&:hover其实是个语法糖，咱们纯CSS里有直接的替代方式，而且你不想用:hover触发的话，还有其他更合适的方案，我给你一步步讲清楚：

SCSS里的&是父选择器引用，本质就是简化嵌套写法的语法糖。比如你写：

.menu-item {
  &:hover .mega-menu {
    display: block;
  }
}

这里的&就等价于.menu-item，转成纯CSS就是直接把&替换成父选择器，写成完整的选择器链：

.menu-item:hover .mega-menu {
  display: block;
}

所有SCSS的嵌套语法，都可以用这种“展开层级、写出完整选择器路径”的方式转成纯CSS——说白了就是把嵌套的结构拆成扁平的CSS规则就行。

如果不想用鼠标悬停触发菜单，推荐两种无JS的纯CSS方案：

方案一：用:focus-within实现聚焦触发 #

:focus-within是CSS原生伪类，当元素本身或者它的子元素获得焦点时，就会触发样式。我们可以给菜单的触发按钮加上tabindex，这样点击按钮或者用键盘Tab键聚焦时，就能展开菜单：

<li class="menu-item">
  <button tabindex="0">菜单标题</button>
  <div class="mega-menu">
    <!-- 你的菜单内容 -->
  </div>
</li>

对应的CSS：

.mega-menu {
  display: none; /* 默认隐藏菜单 */
}
.menu-item:focus-within .mega-menu {
  display: block; /* 父元素内有焦点时显示菜单 */
}

这个方案的好处是支持键盘导航，更符合无障碍设计的要求。

方案二：用隐藏Checkbox + :checked伪类实现点击触发 #

这是很经典的无JS点击触发菜单的方法，通过隐藏的checkbox来控制菜单的显示/隐藏：

<li class="menu-item">
  <input type="checkbox" id="mega-menu-1" class="menu-checkbox">
  <label for="mega-menu-1">菜单标题</label>
  <div class="mega-menu">
    <!-- 你的菜单内容 -->
  </div>
</li>

对应的CSS：

/* 隐藏原始的checkbox，不让它显示在页面上 */
.menu-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* 默认隐藏菜单 */
.mega-menu {
  display: none;
}
/* 当checkbox被选中时，显示对应的菜单 */
.menu-checkbox:checked + label + .mega-menu {
  display: block;
}
/* 可选：给选中状态的label加样式，提示用户菜单已展开 */
.menu-checkbox:checked + label {
  background-color: #f0f0f0;
}

这种方式完全通过点击label来触发菜单，和hover无关，适合移动端或者需要点击触发的场景。

如果你要把目标Codepen上的SCSS代码转成纯CSS，只需要做两步：

• 把所有嵌套的选择器展开，把&替换成它所在的父选择器
• 把SCSS的变量（如果有的话）替换成具体的数值，比如$primary-color换成#2563eb这样的颜色值

举个例子，原SCSS的嵌套结构：

.mega-menu-container {
  ul {
    list-style: none;
    &.menu-list {
      display: flex;
      & > li {
        position: relative;
        &:hover .mega-menu {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
}

转成纯CSS就是：

.mega-menu-container ul {
  list-style: none;
}
.mega-menu-container ul.menu-list {
  display: flex;
}
.mega-menu-container ul.menu-list > li {
  position: relative;
}
.mega-menu-container ul.menu-list > li:hover .mega-menu {
  opacity: 1;
  visibility: visible;
}

这样你就能完全用纯CSS实现和原SCSS一样的Mega-menu效果了，甚至可以根据需求改成非hover触发的版本~

内容的提问来源于stack exchange，提问作者MOHAMED ALAA TABNAJ