如何在导航栏中添加下拉菜单？答案

【问题标题】：How do I add a dropdown menu in navbar?如何在导航栏中添加下拉菜单？
【发布时间】：2019-05-30 15:12:35
【问题描述】：

我想知道如何在“社交媒体”类所在的导航栏中添加下拉菜单。这是我的代码：

    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Social Media</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav

【问题讨论】：

请edit 包含您正在使用的 css 框架的问题，以便尝试回答的人不要查看这些类并做出假设。
您的 html 不完整（甚至 nav 结束标记被剪切）

标签： html css drop-down-menu navbar

【解决方案1】：

<div class="navbar-nav">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
  <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

  <a class="nav-item nav-link" href="#">Social Media</a>

  <a class="nav-item nav-link" href="#">Pricing</a>

  <a class="nav-item nav-link disabled" href="#">Disabled</a>
  </div>
</div>
</div>

您必须做几件事 - 将您的项目包装在 2 个 div 标签中。一个是类下拉菜单。这个包含您单击以显示实际下拉列表的按钮。另一个 div 带有类下拉菜单。此 div 包含您的项目。使用较新的引导程序，您可以使用按钮而不是链接项。

【讨论】：