如何在导航栏的Social Media选项位置添加下拉菜单（Dropdown Menu）？

嘿，看你的代码应该是用了Bootstrap的导航组件，那咱们直接用Bootstrap自带的下拉组件来实现就很顺手，不用自己写复杂的CSS和JS。我把修改后的完整代码给你，再拆解下关键部分：

修改后的完整导航代码 #

<button><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>
    <!-- 这里是修改后的Social Media下拉菜单 -->
    <div class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Social Media
      </a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Instagram</a></li>
        <li><a class="dropdown-item" href="#">Twitter/X</a></li>
        <li><a class="dropdown-item" href="#">Facebook</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">LinkedIn</a></li>
      </ul>
    </div>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#">Disabled</a>
  </div>
</div>
</nav>

关键修改点说明： #

• 把原来单独的Social Media链接，放到了一个带dropdown类的div容器里，这个类是Bootstrap用来识别下拉组件的父容器
• 给触发下拉的链接加上dropdown-toggle类，还有data-bs-toggle="dropdown"属性——这个属性是Bootstrap JS用来绑定下拉触发逻辑的
• 新增了ul.dropdown-menu容器，里面的每个选项用dropdown-item类，还可以用dropdown-divider加分割线，让菜单更清晰

注意事项： #

如果你用的是Bootstrap 5，要确保页面已经引入了Bootstrap的JS文件（要么用CDN，要么本地引入），不然下拉菜单点了没反应哦。

内容的提问来源于stack exchange，提问作者Paraschos