添加overflow:hidden后下拉菜单失效的技术问题求助

问题场景 #

我正在开发名为News pews的个人新闻网站，这是我的第三个项目，此前未遇到此类问题。页面存在横向滚动条，使用overflow: hidden;可以成功去除该滚动条，但会导致下拉菜单失效，尝试过多种代码方案均未解决。

解决方案 #

核心思路 #

避免直接给body设置全屏overflow: hidden（会截断所有超出视口的内容，包括绝对定位的下拉菜单），改为仅隐藏横向滚动，并修复Bootstrap布局导致溢出的根源问题。

步骤1：修改body的overflow属性 #

将body的CSS改为仅隐藏横向滚动，保留纵向滚动和元素溢出显示：

body{
    overflow-x: hidden; /* 只隐藏横向滚动条，不影响纵向内容和下拉菜单 */
    background-color: rgb(244, 242, 242);   
}

步骤2：修复Bootstrap布局的溢出问题 #

Bootstrap的.row默认带有负左右margin，与.col的padding结合会导致横向溢出，给nav内的.row添加g-0类消除负margin：

<div class="row h-100 g-0"> <!-- 添加g-0解决row负margin导致的横向溢出 -->

修改后的完整代码 #

CSS代码

*{
    margin: 0;
    padding: 0;
}

body{
    overflow-x: hidden;
    background-color: rgb(244, 242, 242);   
}

.the_bg_red{
    background-color: #EF233C;
}
.the_txt_red{
    color: #EF233C;
}
ul{
    list-style-type: none;
}

nav{
    height: 90px;
}

.menus{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.menus li{
    margin-left: 50px;
    margin-top: 10px;
    cursor: pointer;
}
.menus a{
    text-decoration: none;
    color: white;
}
/* ---------------li main---------- */
.li_main{
    position: relative;
}
.submenu_main{
    background-color: white;
    height: auto;
    min-width: 160px;
    position: absolute;
    display: none;
    top: 10vh;
    border-radius: 15px;
    transition: all 0.5s ease;
}
.li_main:hover .submenu_main{
    display: block;
    top: 5vh;
}

#search_btn{
    background-color: white;
    border-radius: 7px;
    border: none;
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    display: flex;
}

HTML代码

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">
    <link rel="stylesheet" href="stayle.css">
    <title>News pews: P.A</title>
</head>

<body>

    <header class="w-100">
        <nav class="the_bg_red px-2 w-100">
            <div class="row h-100 g-0">
                <div class="col-1 d-flex align-items-center justify-content-center">
                    <button class="btn bg-light the_txt_red bars_btn p-3 darkmode_btn_toggle"></button>
                </div>
                <div class="col-7 col-xl-2 d-flex align-items-center">
                    logo img
                </div>
                <div class="col-7 d-none d-xl-flex justify-content-center ">
                    <ul class="menus h-100 text-light  ">
                        <li class="li_main ">
                            <div class="d-flex">
                                <p>main page</p><i class="fas fa-angle-down ms-2 mt-1"></i>
                            </div>
                            <div class="submenu_main ">
                                <ul class="">
                                    <li><a href="#" class="text-dark">author</a></li>
                                    <li><a href="#" class="text-dark">contact with us</a></li>
                                    <li><a href="#" class="text-dark">about us</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-4 col-xl-2 d-flex align-items-center justify-content-center p-0 ">
                    <button type="button" class="mx-2 me-md-5 ms-md-3 darkmode_btn_toggle" data-bs-toggle="modal" data-bs-target="#search_modal"
                        id="search_btn"></button>
                </div>
            </div>
        </nav>
    </header>

</body>
<script src="js/bootstrap.bundle.min.js"></script>

</html>

原理说明 #

1. overflow-x: hidden仅限制横向内容溢出，纵向内容和绝对定位的下拉菜单可以正常显示，不会被截断。
2. Bootstrap的.row默认负margin是为了抵消col的padding实现 gutter 间距，但在.w-100容器中会导致横向溢出，g-0类可以移除row的负margin和col的padding，从根源解决滚动条问题。

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