子菜单错位是因为Grid上下文不继承，必须逐级显式声明display: grid；.submenu需设display: grid才能解析grid-column: 2；推荐固定三列轨道+显式列号定位；小屏应使用display: none控制显隐；父容器须设overflow: visible防裁剪。
为什么只给外层设
，子菜单就错位了
因为 Grid 上下文不继承——
里的
不会自动参考外层的列轨道，它需要自己也是
才能解析这些属性。常见表现是子菜单堆在左上角、文字重叠、或完全不响应定位指令。
必须逐级显式声明：
设
和
每个可展开项（如
）需包裹一层
display: grid.submenugrid-column: 2display: grid.sidebardisplay: gridgrid-template-columns: 240px 240px 240px
，并设
display: grid
.submenu
自身也得设
display: grid
，否则
grid-column: 2
无效
用
grid-column: 2
比
grid-column: span 2
更稳
span
看似省事，但嵌套层级一变就崩：二级菜单
span 2
，三级再套一层变成
span 4
，直接超出容器宽度，触发换行或溢出。固定列轨道 + 显式线号才是可控方案。
推荐写法：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
顶层定义三列：
grid-template-columns: 240px 240px 240px
一级菜单项默认占第 1 列：
grid-column: 1
二级菜单强制进第 2 列：
.submenu[data-level="2"] { grid-column: 2; }
三级菜单进第 3 列：
.submenu[data-level="3"] { grid-column: 3; }
小屏下隐藏子菜单不能只靠
grid-column
移动端把
.submenu
的
grid-column
改成
1
，它依然在 DOM 中渲染、占空间、影响滚动和键盘焦点——屏幕阅读器能读到，Tab 键会卡住。
正确做法是媒体查询中彻底控制显隐：
小屏统一设：
@media (max-width: 767px) { .submenu { display: none; } }
仅当前展开路径上的子菜单设为：
.submenu.active { display: grid; }
JS 展开时，同步清除同级其他
.submenu.active
类，避免多级同时显示
别用
visibility: hidden
或
opacity: 0
替代
display: none
——前者不释放空间，后者不阻断焦点
父容器
overflow
漏设会导致子菜单被裁剪
子菜单横向铺开（比如从第 1 列伸到第 2 列）时，如果父容器（如
.sidebar
）没设
overflow: visible
，浏览器默认按
auto
或
hidden
处理，结果就是右边一半被切掉。
这个点容易被忽略，尤其当侧边栏本身被 flex 包裹时：
.sidebar
必须加：
overflow: visible
若
.sidebar
是 flex 子项，还要确认其父 flex 容器没设
overflow: hidden
不要依赖
z-index
补救——裁剪发生在布局阶段，不是层叠问题
嵌套 Grid 做菜单，真正难的不是写几行 CSS，而是每级容器是否都“知道自己在网格里”。漏掉任意一层
display: grid
，或任一环节用错
display: none
的时机，整个分级逻辑就会静默失效。