如何保留overflow:hidden时修复Bootstrap导航栏下拉菜单溢出隐藏问题

我来帮你搞定这个问题！你遇到的核心矛盾是：overflow:hidden是实现毛玻璃效果的必需属性（用来裁剪伪元素溢出的模糊区域），但它会把Bootstrap下拉菜单中超出导航栏边界的部分给截断。下面是针对性的解决思路和代码修改方案：

问题根源分析 #

你的毛玻璃效果是通过给<nav>元素添加伪元素实现的，伪元素用margin: -10px来扩大模糊范围，这时必须给<nav>加overflow:hidden才能把溢出的模糊区域裁剪掉，只保留导航栏范围内的毛玻璃效果。但Bootstrap的下拉菜单是作为<nav>的子元素存在的，当它展开时会超出<nav>的垂直边界，自然会被overflow:hidden裁剪。

解决思路 #

把毛玻璃效果的载体从<nav>元素转移到它内部的一个独立容器中，让<nav>本身不再设置overflow:hidden，这样下拉菜单就能正常展开；而毛玻璃的模糊区域依然被内部容器的overflow:hidden限制，不会溢出到导航栏外面。

修改后的完整代码 #

CSS部分 #

body {
  background-image: url('https://i.imgur.com/0zi2FqA.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
nav {
  background: transparent; /* 改为透明，让内部毛玻璃容器显示 */
  position: relative;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  z-index: 1;
  /* 移除原来的overflow:hidden */
}
.nav-glass-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 把overflow:hidden移到这个内部容器上 */
  background: inherit;
}
.nav-glass-container::before {
  content: "";
  position: absolute;
  background: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -10px;
}

HTML部分 #

只需要在<nav>内部添加一个nav-glass-container容器，把所有导航内容包裹进去：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<nav class="navbar navbar-expand-sm navbar-dark">
  <!-- 新增的毛玻璃容器 -->
  <div class="nav-glass-container">
    <a class="navbar-brand text-white">
      <img src="new.svg" width="60" height="60" class="rounded-circle"> BRAND
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link signOutButton" href="#"><i class="fa fa-sign-out"></i> Sign Out</a>
        </li>
        <li class="nav-item login dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"><i class="fa fa-sign-in"></i> Log In</a>
          <div class="dropdown-menu dropdown-menu-right text-center" aria-labelledby="navbarDropdown">
            <a class="dropdown-item googleButton">1</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item emailButton disabled" disabled>2</a>
          </div>
        </li>
        <li class="nav-item settings dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button" data-toggle="dropdown"><i class="fa fa-cog"></i> Settings</a>
          <div class="dropdown-menu dropdown-menu-right text-center" aria-labelledby="settingsDropdown">
            <a class="dropdown-item text-danger deleteAccount">1</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item text-primary info">2</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item text-primary addUrl">3</a>
            <div class="dropdown-divider beforechangePass"></div>
            <a class="dropdown-item text-primary changePass">4</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><!-- 用于测试滚动 -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

额外适配说明 #

1. 滚动时的导航栏固定：如果你希望页面滚动时导航栏固定在顶部，只需要给<nav>添加fixed-top类即可，下拉菜单依然能正常展开，毛玻璃效果不受影响。
2. 移动端适配：Bootstrap的折叠菜单功能完全不受影响，因为我们只是调整了内部容器的结构，没有修改Bootstrap的核心组件逻辑。
3. 毛玻璃效果保留：通过内部容器的overflow:hidden，伪元素的模糊区域依然被限制在导航栏范围内，完美保留了原来的毛玻璃视觉效果。

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