我有一个网站,我在其中使用 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) 悬停时。
最佳答案
你在找这个吗?
.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>
关于html - Bootstrap 4.1 悬停下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51413782/