grid布局下下拉菜单展开覆盖内容而非向下推开元素如何解决

下拉菜单展开时覆盖内容而非推开页面，核心是两个CSS样式冲突导致的，和inline-grid布局本身没有直接关系：

• .dropdown-content类设置了position: absolute：绝对定位元素会完全脱离正常文档流，不占据页面布局空间，无论外层布局怎么调整，都无法推动其他元素位移，只会悬浮覆盖在内容上方。
• .sidenavinline类给网格行设置了固定高度：代码中同时写了grid-template-rows: 60px 60px 60px和grid-auto-rows: 60px，强制所有网格行高度锁死为60px，就算下拉元素回到文档流，父容器行高固定的情况下，内容要么溢出裁切，要么悬浮，无法撑开行高推动下方元素。
  单独测试单列2行inline-grid结构时功能正常，是因为测试代码没有上述两个限制样式，迁移到主站后被全局样式覆盖影响。

不需要调整现有JS逻辑，只需要修改对应CSS规则即可实现预期效果：

1. 让下拉菜单回到正常文档流
   修改.dropdown-content样式，移除绝对定位，让元素参与布局计算：

   .dropdown-content {
     display: none;
     position: static; /* 替换原有的absolute定位 */
     background-color: #f1f1f1;
     width: 100%;
     min-width: unset;
     box-shadow: none;
     z-index: 1;
   }
   

2. 解除侧边栏网格的固定行高限制
   修改.sidenavinline样式，把固定行高改为最小60px、随内容自适应的高度规则：

   .sidenavinline {
     display: inline-grid;
     grid-template-columns: 100%;
     /* 删除原代码中固定行高的grid-template-rows: 60px 60px 60px; 配置 */
     grid-auto-rows: minmax(60px, auto);
     gap: 10px;
   }
   

3. 可选优化：消除按钮和下拉内容的空隙
   如果觉得垂直居中导致按钮和下拉菜单之间留白太多，可以调整菜单项的对齐规则：

   [class^='one'] {
     display: grid;
     align-items: start; /* 替换原有的center对齐，让内容靠网格顶部排列 */
     justify-content: center;
     background-color: white;
     font-size: 20px;
     color: #333;
     gap: 10px;
     padding: 10px 0;
   }
   

修改完成后点击下拉按钮，菜单会在正常文档流中展开，自动撑开所在网格行的高度，顺次推开下方的侧边栏选项、右侧内容区、底部页脚内容，不会再出现悬浮覆盖其他按钮的问题。

内容的提问来源于stack exchange，提问作者Lost in Symbols