details元素下拉菜单无法覆盖主体内容问题求助

核心问题分析 #

• .subnav元素设置了overflow: hidden，会将超出该容器范围的下拉内容直接裁剪，导致下拉菜单无法突破导航栏区域显示
• HTML中下拉容器的类名是dropdown-men，但CSS中对应的类名是dropdown-menu，类名不匹配导致样式完全不生效
• 下拉菜单的定位逻辑需要调整，确保它能正确悬浮在主体内容上方

修复步骤 #

1. 调整overflow属性：将.subnav中的overflow: hidden改为overflow-x: hidden，只隐藏水平方向溢出，允许垂直方向内容突破容器
2. 修正类名拼写：把HTML里的dropdown-men改为dropdown-menu，确保CSS样式能正确应用
3. 优化定位与层级：给下拉菜单设置top: 100%让它从导航栏下方开始显示，同时设置足够高的z-index确保覆盖主体内容

修改后的完整代码 #

HTML

<nav class="subnav">
    <div class="subnav-wrapper">
        <ul class="subnav-items">
            <li>nav 1</li>
            <li>nav 2</li>
        </ul>

        <details class="subnav-paddle">
            <summary></summary>
            <div class="dropdown-menu">
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </div>
        </details>
    </div>
</nav>
<main class="main">
    <h1>hi</h1>
</main>

CSS

.subnav {
    height: 116px;
    padding: 8px;
    background-color: hsl(0deg 0% 0%);
    color: white;
    overflow-x: hidden;
    margin-bottom: 12px;
}

.subnav-wrapper {
    position: relative;
}

.subnav-items {
    display: flex;
    justify-content: center;
    list-style: none;
    white-space: nowrap;
    overflow-y: hidden;
    width: auto;
}

.subnav-paddle {
    font-size: 17px;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 0em;
    background-color: black;
    border-left: 1px solid #d2d2d7;
    border-radius: 0;
    top: 0;
    bottom: 0;
    color: #f5f5f7;
    text-align: center;
    position: absolute;
    opacity: 1;
    width: 33px;
    right: 0;
    padding-top: 28px;
    padding-left: 4px;
    z-index: 999;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    z-index: 999;
    width: 160px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 2px;
    list-style: none;
    background-color: #06c;
    border: 1px solid greenyellow;
    border-radius: 6px;
    box-shadow: 0 2px 8px #d2d2d7;
    right: 0;
    left: auto;
}

额外说明 #

• 给.subnav-paddle设置z-index，确保触发下拉的按钮层级足够，不会被其他元素遮挡
• 给下拉菜单添加box-shadow，让视觉效果更贴近参考设计

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