Javascript 导航中的引导下拉列表不工作

引导下拉导航不工作。当一个人单击图像时，我使用下拉菜单，但它不显示下拉菜单

<ul class="topnav">
<li><a href="#">HIFZIL</a></li>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
     <li>
                        <a class="" href="#3"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages</a>
                        <a class="header-menu-number" href="#4">5</a>
     </li>
    <li  class="navbar-right">

    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle color" type="button" id="menu1" data-toggle="dropdown"><span class="caret"></span>  </button>
  <ul class="dropdown-menu color" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
  </ul>
</div>


    </li>



    <li  class="navbar-right"><a href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>

  <li class="icon">
    <a href="javascript:void(0);" style="font-size:25px;" onClick="myFunction()" class="fa fa-align-justify fa-4x"></a>
  </li>
</ul>

我在自定义导航中创建了自定义导航，并将引导下拉列表放置在自定义导航中

<ul class="topnav">
<li><a href="#">HIFZIL</a></li>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
     <li>
                        <a class="" href="#3"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages</a>
                        <a class="header-menu-number" href="#4">5</a>
     </li>
    <li  class="navbar-right">

    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle color" type="button" id="menu1" data-toggle="dropdown"><span class="caret"></span>  </button>
  <ul class="dropdown-menu color" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
  </ul>
</div>


    </li>



    <li  class="navbar-right"><a href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>

  <li class="icon">
    <a href="javascript:void(0);" style="font-size:25px;" onClick="myFunction()" class="fa fa-align-justify fa-4x"></a>
  </li>
</ul>

---

删除ul.topnav{overflow:hidden}

---

下拉列表可能不在容器中，并且由于该规则被隐藏。

哪个版本的引导？我猜它高于3。我只是在我的环境中复制了senario。如果您想要完整的解决方案，请告诉我。您只需将.navbar right类从位于。你的代码会工作得很好。如果没有，请告诉我。我很乐意提供帮助。下拉列表并不隐藏在代码中，它只是被推向最右边。我相信你会找到的。