使用单header实现移动端子菜单内嵌、桌面端子菜单在主菜单下方布局

我期望实现如下桌面端菜单效果：

移动端菜单效果如下：

我已经尝试过两种实现方案：

• 方案1：使用两个不同的header，通过CSS控制显隐，样式开发简单，但对屏幕阅读器的无障碍适配不理想。

<header class="mobile-header">
</header>
<header class="desktop-header">
</header>

• 方案2：使用单个header，代码结构如下：

<header>
<h1 aria-label="Brandname">
  <a class="" href="/">
    Brandname
  </a>
</h1>

<nav class="main-menu-wrapper" role="navigation">
    <button class="toggle-mobile-menu" aria-expanded="false">Menu</button>
        <ul class="main-menu">
            <li><a href="/">Menu Item 1</a>
                <ul>
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>
                </ul>       
            </li>
            <li><a href="/">Menu Item 1</a>
                <ul>
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>                    
                </ul>
            </li>
            <li><a href="/">Menu Item 3</a>
                <ul>
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>                    
                </ul>
            </li>   
        </ul>
</nav>

</header>

我比较认可这个结构的语法规范性，且在移动端运行效果良好，但不清楚如何适配桌面端样式。我曾考虑给submenu设置position: absolute属性，但该方案需要通过JavaScript计算高度，我不确定是否合理，是否有更简单的实现方案？
参考的目标效果如下：


但参考实现使用了两个不同的header元素，这是我想要避免的方案。

解决方案 #

你现有的单header结构完全可以实现需求，不需要额外JavaScript计算高度，纯CSS就能搞定，具体实现逻辑如下：

核心思路 #

用媒体查询区分移动端、桌面端断点，两套样式完全隔离，兼顾无障碍和语义规范。

具体实现步骤 #

1. 基础样式归一化
   先给菜单基础元素清除默认样式，避免不同浏览器默认样式干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}

2. 移动端样式（默认优先，采用移动优先适配逻辑）

• 隐藏.main-menu默认状态，点击按钮后添加自定义类（比如is-open）控制显示
• 子菜单默认折叠，点击父级菜单项展开，这部分你已经实现的逻辑可以直接复用

/* 移动端断点，可根据实际需求调整阈值，这里以768px为例 */
@media (max-width: 767px) {
  .main-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    padding: 2rem;
  }
  .main-menu.is-open {
    display: block;
  }
  .main-menu li {
    margin: 1rem 0;
  }
  /* 子菜单缩进显示 */
  .main-menu li ul {
    padding-left: 1rem;
    margin-top: 0.5rem;
  }
  .toggle-mobile-menu {
    display: block;
  }
}

3. 桌面端样式（768px以上）

• 隐藏移动端菜单开关按钮
• 一级菜单横向排列，子菜单用position: absolute悬浮，不需要JS计算高度
• 给父级菜单项加position: relative作为子菜单定位基准，子菜单设置top: 100%、left: 0就会自动对齐父菜单底部，高度由内容自动撑开

@media (min-width: 768px) {
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
  }
  .toggle-mobile-menu {
    display: none;
  }
  .main-menu {
    display: flex;
    gap: 2rem;
  }
  /* 一级菜单项作为子菜单定位容器 */
  .main-menu > li {
    position: relative;
    padding: 0.5rem 0;
  }
  /* 子菜单默认隐藏，hover父级显示 */
  .main-menu > li ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
  }
  .main-menu > li:hover ul {
    display: block;
  }
}

无障碍优化补充 #

• 桌面端hover显示子菜单的同时，也要支持键盘聚焦显示，给父级菜单项的a标签加focus事件关联子菜单显示即可，不需要额外计算逻辑
• 子菜单的aria-hidden属性可以跟着显示状态同步切换，不影响屏幕阅读器识别

方案优势 #

• 完全复用同一个DOM结构，没有冗余节点，无障碍适配友好
• 不需要JS计算任何高度，所有尺寸都由内容和CSS自动控制，维护成本低
• 兼容所有现代浏览器，逻辑清晰修改灵活

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