I have a code for bootstrap dropdown-menu which works with Bootstrap v2.x here.
I have the same code here, but with Bootstrap v3.3.1 included instead.
The second one does not work, while the first one does. Any ideas as to how can I make the dropdown-menu component work with bootstrap 3 ?
submenus were removed with bootstrap 3.0 because they aren't very friendly with mobile devices. Their are css hacks out there to make them work though.
by adding some css:
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {display: block;right:162px;}
.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:active>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;}
Here's your original fiddle but modified with the css. http://jsfiddle.net/mss9eaws/13/ You also have overflow issues when hovering on the top part of your menu due to changes in bootstrap 3 css. Please accept this as the answer if you agree it worked and then ask a separate question about the overflow.