Bootstrap Multi-level dropdown pin the sub menu's on DOM

Question

In Brief, I'm trying to use Bootstrap's Multilevel Dropdown feature.

Here we'r facing a issue like if you take mouse cursor out of drop-down menu or drop-down submenu then its getting hide by default. But i wanted to pin it even after mouse cursor goes out of drop-down menu or drop-down submenu. & it should get hide once i do click on DOM or any where on the page.

Here I'm attaching some reference of multi-level menu.

Bootply

If any one of us had something for this please share with me.

I found something similar to my requirement. But Its developed in Bootstrap v3. I need this in Bootstrap v2.3.2. Here is the twitter-bootstrap-multilevel-dropdown-menu

Answer 1

My answer for multilevel dropdown menu for bootstrap v3 also works for v2.3.2. Here is the answer: https://stackoverflow.com/a/18025399/2214222

Also, Bootply example for v2.3.2

Answer 2

So I hope I don't forget something in the answer :

Bootply : http://bootply.com/113016

JS :

$('.dropdown-submenu').on('mouseover', function(){
    $(this).find('.dropdown-menu').first().show();
});

$(document).on('click', function(){
    $('.dropdown-menu .dropdown-menu').hide();
});

CSS [see commented lines] :

.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:hover>.dropdown-menu{display:block;}
.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:#ffffff;}
.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;}