Question

我目前有一个使用Bootstrap 4制作的导航栏，我希望有人可以帮助我。我无法在下拉菜单中显示下拉菜单。目前，只有在单击选项卡，然后显示下拉菜单时，它才起作用。

我想知道如何使下拉菜单悬停吗？

a.dropdown-item:hover {
  background-color: orange;
  color: white;
  text-shadow: 1px 1px grey;
}


/* Removing outline from navbar tabs */

a#navbarDropdown.nav-link.dropdown-toggle:active,
a#navbarDropdown.nav-link.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-toggle::after {
  display: none;
}

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">Heating</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">item 1</a>
        <a class="dropdown-item" href="#">item 1</a>
        <a class="dropdown-item" href="#">item 1</a>
        <a class="dropdown-item" href="#">item 1</a>
      </div>
    </li>
</div>

我需要一些帮助，仅使下拉菜单在悬停上起作用，而不需要单击以进行下拉。

我尝试添加data-hover =“ dropdown”。

Answer 1

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

弄清楚了。

使用Bootstrap 4导航下拉悬浮

1 个答案: