Bootstrap 3仍然在RC，但我只是想实现它。我无法弄清楚如何放置子菜单类。即使css中没有课程，甚至新的文档都没有说出任何关于它的内容
它在2.x中，类名为dropdown-submenu
答案 0 :(得分：524)
2018年更新
在Bootstrap 3 RC中删除了dropdown-submenu。用Bootstrap作者Mark Otto的话说。
＆＃34;子菜单目前在网络上没有多少地方，特别是移动网络。他们将被删除3.0＆＃34; - https://github.com/twbs/bootstrap/pull/6342
但是，通过一些额外的CSS，您可以获得相同的功能。
Bootstrap 4 （悬停时的导航栏子菜单）
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
}
Navbar submenu dropdown hover
Navbar submenu dropdown hover (right aligned)
Navbar submenu dropdown click (right aligned)
Navbar dropdown hover (no submenu)
Bootstrap 3
以下是使用3.0 RC 1的示例：http://bootply.com/71520
以下是使用Bootstrap 3.0.0（最终版）的示例： http://bootply.com/86684
<强> CSS
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
示例加价
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
P.S。 - 调整左侧位置的导航栏示例：http://bootply.com/92442
答案 1 :(得分：61)
@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/
答案 2 :(得分：42)
直到今天（2014年1月9日），Bootstrap 3仍不支持子菜单下拉列表。
我在Google上搜索了自适应导航菜单，发现这是我最好的。
智能菜单 http://www.smartmenus.org/
我希望这是任何想要使用多级子菜单的导航菜单的人的出路。
更新2015-02-17智能菜单现在完全支持子菜单的Bootstrap元素样式。有关更多信息，请查看智能菜单网站。
答案 3 :(得分：5)
Shprink的代码对我帮助最大，但为了避免下拉屏幕，我将其更新为：
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');
var menu = $(this).parent().find("ul");
var menupos = $(menu).offset();
if (menupos.left + menu.width() > $(window).width()) {
var newpos = -$(menu).width();
menu.css({ left: newpos });
} else {
var newpos = $(this).parent().width();
menu.css({ left: newpos });
}
});
CSS：FROM background-color：#eeeeee TO background-color：＃c5c5c5 - white font＆amp;浅色背景看起来不太好。
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}
我希望这能帮助人们，就像它对我一样！
但我希望Bootstrap尽快添加子功能。
答案 4 :(得分：4)
对Skelly's really helpful workaround的评论：在Bootstrap-sass 3.3.6中，utilities.scss，第19行：.pull-left有float:left !important。既然如此，我建议在他的CSS中使用！important：
.dropdown-submenu.pull-left {
float:none !important;
}
答案 5 :(得分：2)
几天前我遇到了这个问题。我尝试了很多解决方案，但最终没有一个对我有效，我最终创建了一个扩展/覆盖bootstrap的下拉代码。它是原始代码的副本，其中包含对closeMenus函数的更改。
我认为这是一个很好的解决方案，因为它不会影响bootstrap js的核心类。
您可以在gihub上查看：https://github.com/djokodonev/bootstrap-multilevel-dropdown
答案 6 :(得分：0)
在 Bootstrap 5 中，由于新增了 autoClose 选项，现在无需使用任何 JavaScript 代码即可轻松实现下拉子菜单。
现场演示：https://jsfiddle.net/42rx6sqp/
.dropdown-menu .dropdown-menu {
transform: none !important;
top: -.5rem !important;
left: 100% !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="dropdown">
<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>
答案 7 :(得分：-2)
我为下拉列表制作了另一个解决方案。希望这是有帮助的 只需添加此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>