React顶部导航栏Dropdown下拉菜单Y轴溢出显示异常求助

解决方案 #

问题根源

.dropdowns-container设置的overflow-x: hidden会同时裁剪容器内所有方向的溢出内容，包括下拉菜单的Y轴溢出部分，导致下拉菜单被容器边界遮挡，无法悬浮显示。

修复代码

仅需修改CSS部分，JSX代码无需改动：

/* Top Navigation Styling */
.top-nav {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #ccc;
    position: relative; /* 新增：作为下拉菜单的定位父容器 */
}

/* Logo Styling */
.logo {
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}

/* Arrow Button Styling */
.arrow-button {
    background-color: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}

/* Dropdown Container Styling */
.dropdowns-container {
    display: flex;
    /* 移除 overflow-x: hidden，改用clip-path实现X轴定向裁剪 */
    clip-path: inset(0 0 0 0);
    width: 300px;
    border: 1px solid #ccc;
    padding: 5px;
    position: relative;
}

/* Wrapper to handle scrolling */
.dropdowns-wrapper {
    display: flex;
    transition: transform 0.3s ease;
}

/* Individual Dropdown Styling */
.dropdown {
    margin: 0 10px;
    position: relative;
}

/* Label Styling */
.dropdown-label {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Custom Dropdown List */
.dropdown-list {
    position: absolute;
    top: 30px;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 999; /* 提高层级确保悬浮在最上层 */
    width: 150px;
}

/* Dropdown Item Styling */
.dropdown-item {
    padding: 8px 10px;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f4f4f4;
}

原理说明

1. clip-path: inset(0 0 0 0)：仅裁剪超出容器X轴边界的内容，Y轴方向的溢出元素不受影响，下拉菜单可以正常显示在容器外部。
2. .top-nav添加position: relative：让下拉菜单的绝对定位基于整个导航栏，避免滚动时下拉菜单位置偏移。
3. 提高z-index：确保下拉菜单不会被页面其他元素覆盖，始终悬浮在最上层。

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