引导3仍然在RC，但我只是试图实现它。我不知道怎么放一个子菜单类。甚至css中没有类，甚至新的文档也没有提到它
2分钟就到了。用类名作为下拉菜单
当前回答
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">The Providers</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li ><a href="#">Home</a></li>
<li id="course" class="dropdown" ><a href="#">Courses<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">SEO</a></li>
<li><a href="#">A.I</a></li>
<li><a href="#">M.L</a></li>
<li><a href="#">Graphics</a></li>
<li id="sub-dropdown" class="dropdown"><a href="#">web Design<span style="margin-left: 43px;" class="glyphicon glyphicon-chevron-right"></span> </a>
<ul id="sub-dropdown-menu" class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap 3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Angular</a></li>
</ul>
</li>
</li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Policy</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS
body{
font-family: monospace;
outline: none;
background-image: url(image.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
.navbar-inverse{
background-color: #2a84eb ;
border-color: transparent;
}
.navbar-inverse .navbar-brand{
color: #fff;
font-size: 30px;
margin-right: 40px;
}
#myNavbar .navbar-nav li a{
color: #fff;
font-size: 19px;
}
#myNavbar #course{
transition: all 0.3s ease-in-out;
}
#myNavbar #course:hover{
background-color:#0751a6;
}
.dropdown-menu{
display: none;
position: absolute;
background-color: #f0f0f0;
box-shadow: 2px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#sub-dropdown-menu{
display: none;
position: absolute;
background-color: #f0f0f0;
margin-left: 186px;
margin-top: -26px;
}
#sub-dropdown-menu a , .dropdown-menu a {
color: #000 !important;
font-size: 16px !important;
}
.dropdown:hover .dropdown-menu {display: block;transition: all 0.5s ease-in-out;}
.dropdown .dropdown-menu a:hover{background-color: #c9c7c7;}
#sub-dropdown:hover #sub-dropdown-menu {display: block;}
来源: https://www.youtube.com/watch?v=6CgnWhJ-amE
其他回答
在2022年的Bootstrap 5中，这个GitHub回购中的JS代码是子菜单的最终解决方案:https://github.com/dallaslu/bootstrap-5-multi-level-dropdown。
随着Bootstrap 5，现在很容易实现下拉子菜单，而不需要使用任何javascript代码，这要感谢新的autoClose选项和dropend类。
现场演示:https://jsfiddle.net/b038kc2y/
.dropdown-menu .dropdown-menu {
top: -.5rem !important;
}
<div class="dropdown m-5">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="dropend">
<a class="dropdown-item" href="#" id="dropdownSubMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Submenu Action</a>
<ul class="dropdown-menu" aria-labelledby="dropdownSubMenuLink">
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
@skelly解决方案是很好的，但不会在移动设备上工作，因为悬停状态不会工作。
我添加了一点JS来得到BS 2.3.2的行为。
PS:它将与你得到的CSS一起工作:http://bootply.com/71520尽管你可以评论以下部分:
CSS:
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
JS:
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});
结果可以在我的WordPress主题(页面顶部)上找到:http://shprinkone.julienrenaux.fr/
直到今天(2014年1月9日)Bootstrap 3仍然不支持子菜单下拉。
我搜索了谷歌关于响应式导航菜单，发现这是最好的。
它是智能菜单http://www.smartmenus.org/
我希望这是谁想要导航菜单多级子菜单的出路。
智能菜单现在完全支持子菜单的Bootstrap元素样式。欲了解更多信息，请查看智能菜单网站。
我给出了下拉的另一个解。希望这对你有帮助 只需添加这个js脚本
<script type="text/javascript"> jQuery("document").ready(function() {
jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
e.preventDefault();
e.stopPropagation();
if (jQuery(this).hasClass('open2'))
jQuery(this).removeClass('open2');
else {
jQuery(this).addClass('open2');
}
});
}); < /script>
<style type="text/css">.open2{display:block; position:relative;}</style>
