使用<details>和<summary>实现可展开导航的布局问题

完全可以实现，核心是把<summary>从<details>的流式布局中独立出来，固定它的高度，避免被展开的内容带偏。具体做法如下：

1. 调整HTML结构 #

保持基础的嵌套关系即可，不用大改：

<li class="nav-item">
  <details class="nav-details">
    <summary class="nav-summary">主菜单</summary>
    <ul class="submenu">
      <li>子项1</li>
      <li>子项2</li>
    </ul>
  </details>
</li>

2. 关键CSS设置 #

• 给父元素.nav-item固定初始高度，作为summary的高度基准
• 让.nav-summary绝对定位，锁死高度，同时保证点击区域有效
• 把展开的子菜单放在summary下方，避免重叠
• 可按需隐藏details默认的展开标记

/* 导航项容器，固定初始高度 */
.nav-item {
  height: 50px;
  position: relative;
  list-style: none;
  border: 1px solid #eee;
}

/* 让details占满容器，方便子元素定位 */
.nav-details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 固定summary高度，脱离文档流 */
.nav-summary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 和nav-item初始高度一致 */
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
  background: #f8f8f8;
  /* 隐藏默认的展开/收起小三角 */
  list-style: none;
}

.nav-summary::-webkit-details-marker {
  display: none;
}

/* 展开时让子菜单在summary下方显示 */
.nav-details[open] .submenu {
  margin-top: 50px; /* 和summary高度对齐，避免重叠 */
  border-top: none;
}

.submenu {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #eee;
}

.submenu li {
  padding: 8px 16px;
  list-style: none;
}

3. 原理说明 #

通过绝对定位把summary从details的流式布局中抽离，锁死它的高度，这样details展开时，只会拉动下方的子菜单，不会影响summary的尺寸。同时用margin-top让子菜单避开summary，保持导航的视觉连贯性。

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