使用Bootstrap 4进行Nav下拉悬停 [英] Nav dropdown hover using Bootstrap 4
本文介绍了使用Bootstrap 4进行Nav下拉悬停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前有一个使用Bootstrap 4制作的导航栏,我希望有人可以帮助我.我无法将下拉菜单显示在悬停上.目前,只有在单击选项卡,然后显示下拉菜单时,它才起作用.
I currently have a navbar I've made using Bootstrap 4, I was hoping someone could help me. I cannot get the dropdown to show on hover. At the moment it only works when the tab is clicked then the dropdown menu show.
我想知道如何使下拉菜单悬停吗?
I would like to know how to make the dropdown menu hover?
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>
我需要一些帮助,仅使下拉菜单在悬停上起作用,而不需要单击以进行下拉.
I need some help just making the dropdown work on hover rather than having to click for dropdown.
我尝试添加data-hover ="dropdown".
I've tried to add data-hover="dropdown".
推荐答案
.dropdown:hover>.dropdown-menu {
display: block;
}
弄清楚了.
这篇关于使用Bootstrap 4进行Nav下拉悬停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文