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

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

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:

I thought something like this would work:

But that’s not working.

Solutions/Answers:

Solution 1:

Bootstrap 2.3.x and later supports the dropdown-submenu..

<ul class="dropdown-menu">
            <li><a href="#">Login</a></li>
            <li class="dropdown-submenu">
                <a tabindex="-1" href="#">More options</a>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#">Second level</a></li>
                    <li><a href="#">Second level</a></li>
                    <li><a href="#">Second level</a></li>
                </ul>
            </li>
            <li><a href="#">Logout</a></li>
</ul>

Working demo on Bootply.com

Solution 2:

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

Related:  How do I customize twitter bootstrap's various input sizes without using !important?

References