如何实现水平overflow:hidden且垂直下拉菜单完整显示？

现有代码 #

HTML #

<div id="main-container" class="main-container">
    <div id="column1" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton1" class="hoverButton">hover to show </button>
        <div id="hoverList1" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column2" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton2" class="hoverButton">hover to show </button>
        <div id="hoverList2" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column3" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton3" class="hoverButton">hover to show </button>
        <div id="hoverList3" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column4" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton4" class="hoverButton">hover to show </button>
        <div id="hoverList4" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</div>

CSS #

.main-container {
    width: 220px;
    overflow-x: hidden;
    height: 300px;
    border: gray solid 2px;
    display: flex;
    padding: 2px 2px 2px 2px;
}
.column {
    width: 100px;
    border: blue solid 1px;
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
}
.hoverButton {
    width: 100px;
    height: 50px;
}
.hoverList {
    border: gray solid 2px;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

JavaScript #

let hoverBtn1 = document.getElementById("hoverButton1");
let hoverList1 = document.getElementById("hoverList1");

const showList = () => {
    hoverList1.style.display = "flex";
};
const hideList = () => {
    hoverList1.style.display = "none";
};

hoverBtn1.addEventListener("mouseover", showList);
hoverBtn1.addEventListener("mouseout", hideList);

// function columns() {
//   for (let i = 1; i < 5; i++) {
//     let hoverBtn = hoverBtn + i
//     let hoverBtn += document.getElementById("hoverButton" + i);
//     let hoverList = document.getElementById("hoverList" + i);

//     const showList = () => {
//       hoverList.style.display = "flex";
//     }
//     const hideList = () => {
//       "hoverList" + i.style.display = "none";
//     }

//     "hoverBtn" + i.addEventListener('mouseover', showList);
//     "hoverBtn" + i.addEventListener('mouseout', hideList);
//   }
// }
// columns();

问题描述 #

底部下拉菜单被main容器的overflow截断，容器宽高固定（修改会影响页面布局），水平列类似轮播组件，必须保留overflow-x:hidden隐藏多余列，同时实现鼠标悬停按钮时下拉菜单完整显示。

尝试过调整z-index和position无效；给主容器加底部内边距再设负外边距的方案会影响其他布局，不可行。

解决方案 #

核心思路 #

1. 主容器仅限制水平方向溢出，垂直方向允许内容溢出显示
2. 下拉菜单设为绝对定位，脱离父容器文档流，避免被容器高度限制
3. 批量处理所有按钮的悬停事件，简化代码

修改后的代码 #

CSS 调整

.main-container {
    width: 220px;
    overflow-x: hidden; /* 仅隐藏水平方向溢出 */
    overflow-y: visible; /* 垂直方向允许溢出显示 */
    height: 300px;
    border: gray solid 2px;
    display: flex;
    padding: 2px 2px 2px 2px;
    position: relative; /* 确保菜单层级正常 */
}
.column {
    width: 100px;
    border: blue solid 1px;
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
    position: relative; /* 作为下拉菜单的定位基准 */
}
.hoverButton {
    width: 100px;
    height: 50px;
}
.hoverList {
    border: gray solid 2px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    position: absolute; /* 脱离文档流，不占用父容器空间 */
    top: calc(100% + 4px); /* 定位到按钮下方，4px为间距 */
    left: 2px; /* 和column的padding对齐 */
    background: white; /* 避免被下方内容遮挡 */
    z-index: 10; /* 确保菜单在最上层 */
}

JavaScript 修正（批量处理）

// 批量绑定所有按钮的悬停事件
for (let i = 1; i <= 4; i++) {
    const hoverBtn = document.getElementById(`hoverButton${i}`);
    const hoverList = document.getElementById(`hoverList${i}`);

    const showList = () => {
        hoverList.style.display = "flex";
    };
    const hideList = () => {
        hoverList.style.display = "none";
    };

    hoverBtn.addEventListener("mouseover", showList);
    hoverBtn.addEventListener("mouseout", hideList);
    // 补充菜单悬停事件，避免鼠标移到菜单时消失
    hoverList.addEventListener("mouseover", showList);
    hoverList.addEventListener("mouseout", hideList);
}

说明 #

• overflow-y: visible 让主容器不再截断垂直方向内容，同时保留overflow-x:hidden隐藏多余列
• 绝对定位的下拉菜单不受父容器高度限制，能完整显示在容器外部
• 白色背景和高z-index确保菜单不被页面其他元素遮挡
• 批量处理代码减少重复，补充菜单悬停事件提升交互流畅度

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