Multilevel Dropdown in Bootstrap 3.3.5

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.

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

    

        
 Home
        
        
Hospital
            

                
Consultants
                    

                        
Adult cardiac surgery
                        
                        
Bariatric surgery
                        
                        
Colorectal surgery
                        
                        
Endocrine and thyroid surgery
                        
                        
Head and neck cancer surgery
                        
                        
Interventional cardiology
                        
                        
Lung Cancer
                        
                        
Neurosurgery
                        
                        
Orthopaedic surgery
                        
                        
Upper gastro-intestinal surgery
                        
                        
Urological surgery
                        
                        
Vascular surgery
                        
                    
                
                
Another action
                
                
Something else here
                
                

                
Nav header
                
Separated link
                
                
One more separated link
                
            
        
    

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