如何修复引导下拉菜单隐藏的溢出？

Question

我正在做一个项目，它有一个导航栏。我正在使用引导库来设计我的导航栏，为了让它更漂亮，我添加了磨砂玻璃效果。但是在将这个效果添加到我的导航栏之后，由于我的 css 文件中的overflow:hidden 规则，所有下拉菜单现在都被隐藏了一半。 overflow:hidden 是必需的，因为没有这个属性，玻璃效果不是很好。有什么方法可以同时保持溢出属性并使这些下拉菜单像添加此效果之前一样完美运行？

html&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: inherit;
  position: relative;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  z-index: 1;
  overflow: hidden;
}

nav::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;
}

<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>
    
<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">
  <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>
</nav>

<br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><!-- for making scrollable -->

这里是fiddle

编辑：我想要一个适用于各种设备的解决方案，无论大小。如果您的网站非常大，以下一些答案也不好。当时滚动它会以某种方式破坏导航栏的功能。我想在不改变导航栏在各种设备上的主要功能的情况下实现这种 css 效果。

Answer 1

编辑： 根据要求，这应该可以工作：

@media only screen and (min-width: 600px) {
    ul{
      position:fixed !important;
      right: 0;
      left: auto;
    }
}

这将使ul 和它的孩子不会被剪裁。因此，overflow:hidden 不会应用于它们。此外，这将使您的元素向右对齐。

<nav class="navbar navbar-expand-sm navbar-dark navbar-fixed fixed-top">

这将使您的导航栏固定在顶部。

Answer 2

还有另一种方法可以解决您的问题，您可以删除导航上的over-flow:hidden;，并为您的nav::before 分配一个高度，例如让它为 110px，然后您可以使用此nav::after 代码来清除模糊效果的边界

body {
  background-image: url('https://i.imgur.com/IUWnlGU.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

nav {
  background: inherit;
  position: relative;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  z-index: 999;
  /* overflow: hidden; */
}

nav::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);
  /* assign a height*/
  height: 110px;
  margin: -10px;
   overflow: hidden;
}

/*the clear effect*/
nav::after {
  content: "";
  position: absolute;
  height:30px;
  left:0;
  top:90px;
  width:100%;
  background: inherit;
}