How to make a 3-level collapsing menu in Bootstrap

Question

I am trying to make a 3-level collapsing navbar menu for Bootstrap  but I can t open the third level   This is the two level menu which I have    x000D   x000D   lt link href  https   stackpath bootstrapcdn com twitter-bootstrap 2 3 2 css bootstrap-combined min css  rel  stylesheet   gt  x000D   lt div class  navbar navbar-fixed-top  gt  x000D     lt div class  navbar-inner  gt  x000D       lt div class  container  gt  x000D         lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D         lt  a gt  x000D   x000D         lt div class  nav-collapse  gt  x000D           lt ul class  nav  gt  x000D             lt a class  brand  href     gt Present Ideas lt  a gt  x000D             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Blog lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt About lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Help lt  a gt  lt  li gt  x000D             lt li class  dropdown  id  accountmenu  gt  x000D               lt a class  dropdown-toggle  data-toggle  dropdown  href     gt Account Settings lt b class  caret  gt  lt  b gt  lt  a gt  x000D               lt ul class  dropdown-menu  gt  x000D                 lt li gt  lt a href     gt Login lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Register lt  a gt  lt  li gt  x000D                 lt li class  divider  gt  lt  li gt  x000D                 lt li gt  lt a href     gt Logout lt  a gt  lt  li gt  x000D               lt  ul gt  x000D             lt  li gt  x000D           lt  ul gt  x000D           lt ul class  nav pull-right  gt  x000D   x000D           lt  ul gt  x000D         lt  div gt  x000D         lt  --  nav-collapse -- gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I thought something like this would work    x000D   x000D   lt link href  https   stackpath bootstrapcdn com twitter-bootstrap 2 3 2 css bootstrap-combined min css  rel  stylesheet   gt  x000D   lt div class  navbar navbar-fixed-top  gt  x000D     lt div class  navbar-inner  gt  x000D       lt div class  container  gt  x000D         lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D         lt  a gt  x000D   x000D         lt div class  nav-collapse  gt  x000D           lt ul class  nav  gt  x000D             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Blog lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt About lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Help lt  a gt  lt  li gt  x000D             lt li class  dropdown  id  accountmenu  gt  x000D               lt a class  dropdown-toggle  data-toggle  dropdown  href     gt Account Settings lt b class  caret  gt  lt  b gt  lt  a gt  x000D               lt ul class  dropdown-menu  gt  x000D                 lt li gt  lt a href     gt Login lt  a gt  lt  li gt  x000D                 lt li class  item-148 dropdown parent  gt  x000D                   lt a href   about learn-more  gt Learn more amp nbsp  lt b class  caret-right  gt  lt  b gt  lt  a gt  x000D                   lt ul class  dropdown-menu  gt  x000D                     lt li class  item-149  gt  lt a href   about learn-more the-software  gt The Software lt  a gt  lt  li gt  x000D                     lt li class  item-150  gt  lt a href   about learn-more the-project  gt The Project lt  a gt  lt  li gt  x000D                     lt li class  item-151  gt  lt a href   about learn-more the-leadership  gt The Leadership lt  a gt  lt  li gt  x000D                     lt li class  item-152  gt  lt a href   about learn-more open-source-matters  gt Open Source Matters lt  a gt  lt  li gt  x000D                   lt  ul gt  x000D                 lt  li gt  x000D                 lt li class  divider  gt  lt  li gt  x000D                 lt li gt  lt a href     gt Logout lt  a gt  lt  li gt  x000D               lt  ul gt  x000D             lt  li gt  x000D           lt  ul gt  x000D           lt ul class  nav pull-right  gt  x000D   x000D           lt  ul gt  x000D         lt  div gt  x000D         lt  --  nav-collapse -- gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    But that s not working

User · Answer

Bootstrap 3 dropped native support for nested collapsing menus, but there's a way to re-enable it with a 3rd party script. It's called SmartMenus. It means adding three new resources to your page, but it seamlessly supports Bootstrap 3.x with multiple levels of menus for nested <ul>/<li> elements with class="dropdown-menu". It automatically displays the proper caret indicator as well.

<head>
   ...
   <script src=".../jquery.smartmenus.min.js"></script>
   <script src=".../jquery.smartmenus.bootstrap.min.js"></script>
   ...
   <link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/>
   ...
</head>

Here's a demo page: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html

User · Answer

Bootstrap 2 3 x and later supports the dropdown-submenu     lt ul class  dropdown-menu  gt               lt li gt  lt a href     gt Login lt  a gt  lt  li gt               lt li class  dropdown-submenu  gt                   lt a tabindex  -1  href     gt More options lt  a gt                   lt ul class  dropdown-menu  gt                       lt li gt  lt a tabindex  -1  href     gt Second level lt  a gt  lt  li gt                       lt li gt  lt a href     gt Second level lt  a gt  lt  li gt                       lt li gt  lt a href     gt Second level lt  a gt  lt  li gt                   lt  ul gt               lt  li gt               lt li gt  lt a href     gt Logout lt  a gt  lt  li gt   lt  ul gt    Working demo on Bootply com

[html] How to make a 3-level collapsing menu in Bootstrap?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to menu