Bootstrap 4.1中的鼠标悬停下拉菜单

Question

我有一个网站，在其中使用了Bootstrap 4.1创建了下拉列表。目前，下拉列表是通过点击触发的。

我使用的HTML代码用于创建下拉列表：

<div class="collapse navbar-collapse text-center" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">

        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      main menu
    </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">A</a>
                <a class="dropdown-item" href="#">B</a>
                <a class="dropdown-item" href="#">C</a>
                <a class="dropdown-item" href="#">D</a>
            </div>
        </li>

        <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>

    </ul>
 </div>

问题陈述：

我想知道在上面的代码中应该做哪些更改，以便在悬停时可以看到下拉菜单项目(A,B,C,D)。

- flash

Answer 1

你正在寻找这个吗？

.navbar-nav li:hover>.dropdown-menu {
  display: block;
}

<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-collapse text-center" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      main menu
    </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">A</a>
        <a class="dropdown-item" href="#">B</a>
        <a class="dropdown-item" href="#">C</a>
        <a class="dropdown-item" href="#">D</a>
      </div>
    </li>

    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>

  </ul>
</div>

- Tushar

---

我有一个类似的问题。假设在悬停项目D时，是否有任何方法可以创建另一个下拉菜单？就像，如果我们悬停在D上; 项目E，F，G，H，...根据我的要求被创建。 - flash

是的，你可以这样做。但是你需要保持元素的嵌套结构。 - Tushar

Answer 2

如果您想在Bootstrap中悬停时显示下拉菜单，则需要访问此处，这是非常简单的方法。CSS代码很少，您的问题将得到解决。

https://www.youtube.com/watch?v=owdqNLzII38

- amarjeet singh

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Adrian Mole