我目前有一个使用 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"。
最佳答案
.dropdown:hover>.dropdown-menu {
display: block;
}
想通了。
关于html - 使用 Bootstrap 4 的导航下拉悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51247236/