如何制作带有模糊效果 CSS 的下拉列表

Question

我试图让我的下拉菜单具有与我的导航栏相同的不透明度和相同的模糊效果，不透明度工作正常，但模糊效果没有。

听说要用伪类来实现，但我不确定是否要实现。这是我的 CSS：

<style>
      .navbar {
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(3px);
      }
      .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(3px) !important;
      }
</style>

这是我的 html:

<nav class="navbar navbar-expand-lg fixed-top"></nav>
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown link
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>