Html 如何在 Bootstrap 4.1 中悬停时创建下拉子菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51414377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a dropdown submenu on hover in Bootstrap 4.1?
提问by flash
I am working on a website in which I want to create a dropdown submenu on hover in Bootstrap 4.1
我正在一个网站上工作，我想在Bootstrap 4.1 中悬停时创建一个下拉子菜单
The HTML code which I have used in order to create a dropdown menu on hover are:
我用来在悬停时创建下拉菜单的 HTML 代码是：
<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>
Problem Statement:
问题陈述：
I am wondering what changes I should make in the code above so that on hover of D; dropdown items E, F, G, H, are shown.
我想知道我应该在上面的代码中进行哪些更改，以便在 D 悬停时；显示下拉项 E、F、G、H。
回答by Viira
This might help you.....
这可能会帮助你......
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown-item:hover>.dropdown-menu {
display: block;
}
ul li{
list-style-type:none;
display: inline;
}
.navbar-nav .nav-link{display:inline-block;}
.ml-auto {display:inline-block!important;}
.dropdown>.dropdown-toggle:active {
pointer-events: none;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Dropdown submenu on hover</title>
</head>
<body>
<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 nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
D
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">E</a>
<a class="dropdown-item" href="#">F</a>
<a class="dropdown-item" href="#">G</a>
<a class="dropdown-item" href="#">H</a>
</div>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>回答by krupesh Anadkat
This codepenLink has your answer : link
这个代码笔链接有你的答案：链接
Basically create a structure like this
基本上创建这样的结构
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">D <b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">H</a>
<ul class="dropdown-menu">
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
</ul>
</li>
</ul>
</li>
I have written full code for you in codepen, checkout link above in this answer.
我已经在 codepen 中为您编写了完整代码，请在此答案中查看上面的结帐链接。
回答by Pasindu Madhuranga
You just need to add below css.
你只需要添加下面的css。
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Dropdown submenu on hover</title>
</head>
<body>
<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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>回答by H. M.
- First off, create a new CSS file, and name it whatever you'd like. In my case the file is called "my_own.css".
Link it to your page after the link to Bootstrap. So far, hence, we have something like the following:
<link rel="stylesheet" type="text/css" href="bootstrap.css"> <link rel="stylesheet" type="text/css" href="my_own.css">- Simply add the following bit to your custom css file, and try not to change the original bootstrap file, as it will again be replaced in case of a bootstrap update.
- 首先，创建一个新的 CSS 文件，并随意命名。就我而言，该文件名为“my_own.css”。
在链接到 Bootstrap 之后将其链接到您的页面。因此，到目前为止，我们有如下内容：
<link rel="stylesheet" type="text/css" href="bootstrap.css"> <link rel="stylesheet" type="text/css" href="my_own.css">- 只需将以下位添加到您的自定义 css 文件中，并尽量不要更改原始引导程序文件，因为在引导程序更新的情况下它将再次被替换。
li.dropdown:hover > .dropdown-menu {
display: block;
}回答by Vosidiy M
I suggest to use :hover style inside media query. Because on mobile it must be clickable. here is example
我建议在媒体查询中使用 :hover 样式。因为在移动设备上它必须是可点击的。这是例子
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link{ color: #fff; }
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
/* ============ desktop view .end// ============ */
Also you can add fade animation, Here is code: https://bootstrap-menu.com/detail-animation.html
您也可以添加淡入淡出动画，这是代码：https: //bootstrap-menu.com/detail-animation.html
