Multilevel Dropdown in Bootstrap 3.3.5 - html

Question

I have the following HTML code and I've structured it to how I think it should be achieved based on the mark-up in the Bootstrap docs.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Hospital<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown">
Consultants <span class="caret"></span>
<ul class="dropdown-menu">
<li>Adult cardiac surgery</li>
<li>Bariatric surgery</li>
<li>Colorectal surgery</li>
<li>Endocrine and thyroid surgery</li>
<li>Head and neck cancer surgery</li>
<li>Interventional cardiology</li>
<li>Lung Cancer</li>
<li>Neurosurgery</li>
<li>Orthopaedic surgery</li>
<li>Upper gastro-intestinal surgery</li>
<li>Urological surgery</li>
<li>Vascular surgery</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
However, this isn't working, it gives me this:
When I click on the Consultants, it simply gets rid of the dropdown. Can multilevel drop-downs be achieved with Bootstrap CSS/JS alone? Or must we write custom CSS for it?
Any easy solutions that would work similar to how a single nest level work, and are responsive and touch-friendly (for tablets and phones)?
Thanks

Answer 1

I don't recall any default example from bootstrap 3 having 3 level drop down nav menu, but you can do like this, little bit of customization and java-script and it's fully responsive.
HTML
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"> Home
</li>
<li class="dropdown">Hospital<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">Consultants
<ul class="dropdown-menu">
<li>Adult cardiac surgery
</li>
<li>Bariatric surgery
</li>
<li>Colorectal surgery
</li>
<li>Endocrine and thyroid surgery
</li>
<li>Head and neck cancer surgery
</li>
<li>Interventional cardiology
</li>
<li>Lung Cancer
</li>
<li>Neurosurgery
</li>
<li>Orthopaedic surgery
</li>
<li>Upper gastro-intestinal surgery
</li>
<li>Urological surgery
</li>
<li>Vascular surgery
</li>
</ul>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
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 6px;
border-radius:0 6px 6px 6px;
}
.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:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#555;
}
.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;
}
JS
(function ($) {
$(document).ready(function () {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
Working Example