为什么我的导航栏没有显示其内容？

Question

我正在使用 Bootstrap 和其他 css 进行样式设置....一切都很好，除了不显示的下拉菜单是悬停时的内容

在 head 标签中我有这个

<!--Jquery-->
<script  type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"> 
 </script>
<!--Bootsrap-->
<script  type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

这是我的导航栏代码

<nav class="navbar fixed-top navbar-expand-lg navbar-transparent"><a class="navbar-brand" 
 href="#">MAUZO SUPERMARKET</a
    ><button class="navbar-toggler" type="button" data-toggle="collapse" data- 
 target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false"
    aria-label="Toggle navigation"><span class="navbar-toggle-icon"></span></button>
    <div class="navbar">
        <a href="index.html" active>Home</a>
          <div class="dropdown">
            <button class="dropbtn">Stores
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="#">Clothing</a>
                <a href="#">Foodstuff</a>
                <a href="#">Electronics</a>
                <a href="#">Furniture</a>
       
            </div>
            </div>
          <a href="#">Blog</a>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
        </nav> 
        <!--end of navbar-->

Answer 1

从导航标签中移除“navbar-transparent”类。