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 · Accepted 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

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  lt ul gt   lt li gt  elements with class  dropdown-menu    It automatically displays the proper caret indicator as well    lt head gt             lt script src      jquery smartmenus min js  gt  lt  script gt      lt script src      jquery smartmenus bootstrap min js  gt  lt  script gt             lt link rel  stylesheet  href      jquery smartmenus bootstrap min css   gt          lt  head gt    Here s a demo page  http   vadikom github io smartmenus src demo bootstrap-navbar-fixed-top html

[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