我有一個導(dǎo)航條，代碼如下:

<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
        <a class="navbar-brand px-5" href="index.php">
          <img src="img/logo.png" width="110" height="70">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item px-4">
              <a class="nav-link active text-white" href="index.php">Home</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="" id="navbarDropdown1" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">Categories</a>
                <ul class="dropdown-menu">

                  <?php
                  $sql1 = $db->prepare("SELECT * FROM categories WHERE id IN (SELECT parent FROM categories) AND parent = ? AND deleted = ?");
                  $sql1->bind_param('ii', $var0, $var0);
                  $sql1->execute();
                  $result1 = $sql1->get_result();
                  while($row1 = mysqli_fetch_assoc($result1)){
                    $test = $row1['id'];
                    ?>

                    <li class="nav-item dropend">
                    <a class="nav-link active dropdown-toggle" href="" id="navbarDropdown1" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false"><?=$row1['category'];?></a>
                    <ul class="dropdown-menu">

                      <?php
                      $sql2 = $db->prepare("SELECT * FROM categories WHERE parent IN (SELECT id FROM categories) AND parent = ? AND deleted = ?");
                      $sql2->bind_param('ii', $row1['id'], $var0);
                      $sql2->execute();
                      $result2 = $sql2->get_result();
                      while($row2 = mysqli_fetch_assoc($result2)){ ?>

                    <li><a class="dropdown-item" href="category.php?cat=<?=$row2['id'];?>"><?=$row2['category'];?></a></li>

                  <?php } ?>

                  </ul>

                  <?php }
                       $sql3 = $db->prepare("SELECT * FROM categories WHERE id NOT IN (SELECT parent FROM categories) AND parent = ? AND deleted = ?");
                       $sql3->bind_param('ii', $var0, $var0);
                       $sql3->execute();
                       $result3 = $sql3->get_result();
                       while($row3 = mysqli_fetch_assoc($result3)){ ?>

                          <li><a class="nav-link active" href="category.php?cat=<?=$row3['id'];?>"><?=$row3['category'];?></a></li>

                        <?php } ?>

                </ul>
            </li>
          </li>
            <li class="nav-item px-4">
              <a class="nav-link active text-white" href="about.php">About</a>
            </li>
        </ul>
    </div>
    </div>
</nav>

<script>
    document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
        if (window.innerWidth > 992) {
            document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
                everyitem.addEventListener('mouseover', function(e){
                    let el_link = this.querySelector('a[data-bs-toggle]');
                    if(el_link != null){
                        let nextEl = el_link.nextElementSibling;
                        el_link.classList.add('show');
                        nextEl.classList.add('show');
                    }
                });
                everyitem.addEventListener('mouseleave', function(e){
                    let el_link = this.querySelector('a[data-bs-toggle]');
                    if(el_link != null){
                        let nextEl = el_link.nextElementSibling;
                        el_link.classList.remove('show');
                        nextEl.classList.remove('show');
                    }
                })
            });
        }
// end if innerWidth
    });
    // DOMContentLoaded  end
</script>

這個css文件:

.dropdown:hover > .dropdown-menu, .dropend:hover > .dropdown-menu{
  position: block;
  margin-top: .125em;
  margin-left: .125em;
}

@media screen and (min-width:769px){
  .dropend:hover > .dropdown-menu{
    position: absolute;
    top: 0;
    left: 100%;
  }
}

現(xiàn)在奇怪的問題是，當(dāng)我在400x652尺寸的手機(jī)上打開網(wǎng)站時，下拉菜單根本不起作用。如果在500x589尺寸上，下拉菜單有效，但下拉子菜單無效，它會關(guān)閉下拉菜單。我也試圖刪除所有的css，但仍然。問題在哪里，如何解決？