我正在制作我的第一个网页，希望在Bootstrap 5中包含一个响应式导航栏。我让它工作了一段时间，当我开始处理我的业务时，我意识到导航栏停止工作了。目前，它在“大”网页视图中工作，但一旦我减小屏幕大小，它就停止工作了。按钮本身“点击”，但标题不会向下扩展。这是下拉菜单的代码，以及标题区和响应规则的CSS，非常感谢！！
超文本标记语言

<!-- Navbar -->
<nav class="navbar navbar-expand-md bg-body-secondary rounded-4">
<div class="container-fluid">
  <a class="navbar-brand" href="index.html">Kumi Sushi</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 justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="menu.html">Menu</a>
        </li>
              <!-- dropdown -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Navigation
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="directions.html">Directions</a></li>
              <li><a class="dropdown-item" href="about.html">About Us</a></li>
              <li><a class="dropdown-item" href="contact.html">Contact</a></li>
            </ul>
          </li>  
              <!-- dropdown -->
      </ul>
    </div>
  </div>
</nav>
<!-- Navbar -->  

>>>>>CSS 

  /* HEADER */
  header {
      background: 
          /* top, transparent black, faked with gradient */ 
          linear-gradient(
              rgba(0, 0, 0, 0.6), 
              rgba(0, 0, 0, 0.6)
          ),
      url(Images/hero.jpg);
      background-position: center;
      background-size: 100%;
      height: 400px;
      padding: 20px; 
      text-align: center;
    } 
    header .logo a { 
        background-image: url("Images/logo.png"); 
        background-size: 280px;
        background-repeat: no-repeat;
        display: inline-block; 
        height: 340px;
        width: 280px;
        top: 0rem;
        position: relative; 
        text-align: center;
        text-indent: -999999999px;
    }  
    
     .navbar { 
        background-color: gray;
        box-shadow: 0px 2px 5px #777; 
        height: rem;
     } 
     .navbar-brand { 
        text-transform:uppercase; 
     }
    nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    } 
      nav li { 
          color: rgb(0, 0, 0);
          font-size: larger; 
          font-weight: 400;
          display: inline-flex; 
          justify-content: center;
          margin-right: 20px; 
          border-radius: 2px; 
          padding: 2px; 
    } 
      section {
        background: white;
        padding: 20px;
        display: flex;
        flex-direction: row;
    }  
  

/* RESPONSIVE RULES .IMG */
    @media screen and (max-width: 500px) { 
        header { 
                height: 200px; 
                background-position: 0 -0px; 
                background-repeat: no-repeat;
        }
    }
    @media screen and (max-width: 548px) { 
        nav li { 
            font-size: medium;
      } 
    }    
    @media screen and (max-width: 625px) {
        .features { 
            display: block;
        } 
        }  
    @media screen and (max-width: 767px) { 
        .navbar { 
            height: 3.2rem; 
        }
    }
    @media screen and (max-width: 859px) { 
        header .logo a {
            background-image: url("Images/logo.png"); 
            text-align: center; 
            background-size: 58%; 
            background-position: 50% 0;
        } 
        header { 
            height: 220px; 
            background-position: 0 0px;
        } 
    }

我试着将代码粘贴回去，确保我使用的是v5.3，并试着删除我在style.css中编辑过的任何内容
到目前为止，在开发者工具中，它显示的下拉菜单项位于徽标的中心和后面。我测试了没有样式表的HTML，它按预期工作，我想知道是否有一个常见的问题，我可能在这里忽略了。
当我发现这个问题的时候，我正在样式表中乱翻，我回去删除了所有未提交的更改，但我仍然不知所措。我花了一个半小时在Bootstrap网站上挖掘，以找到任何与此相关的问题，以及在这里看一些老问题，找不到我的解决方案。解决方案可能是相当明显的，但肯定超过我的头lmao
还有一个注意事项，我在我的中有我的Bootstrap CSS CDN，在的末尾有JS CDN。看起来大多数旧的响应都是由于jQuery没有放在正确的位置，但是看起来我在5.3中不需要它
任何建议都很感激！再次感谢：）