В Bootstrap 3 нет выпадения нескольких уровней меню. Выпадает только 1-й уровень. Вот, что нашлось, как можно добавить выпадение дополнительных уровней.
<script type="text/javascript">
(function($){
$(document).ready(function(){
// dropdown
if ($('.navbar .parent').children('ul').length > 0) {
$('.navbar .parent').addClass('dropdown');
$('.navbar .parent > a').addClass('dropdown-toggle');
$('.navbar .parent > a').attr('data-toggle', 'dropdown');
$('.navbar-nav > li.parent > a').append('<b class="caret"></b>');
$('.navbar .parent > ul').addClass('dropdown-menu');
}
if ($('.navbar .parent').children('ul').length > 0) {
//$('.moduletable.menu .parent > ul').addClass('dropdown-menu');
$('.navbar li .parent').addClass('dropdown-submenu');
//$('.moduletable.menu .parent > a').attr('data-toggle', 'dropdown');
//$('.moduletable.menu .parent > a').append('<b class="caret"></b>');
}
});
})(jQuery);
</script>
<script type="text/javascript">
(function($){
$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{
e.stopPropagation();
});
})
</script>
И 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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.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;
}