В 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; }