Updated 2018
Here is another variation on the Bootstrap 4.1 Navbar with multi-level dropdown. This one uses minimal CSS for the submenu, and can be re-positioned as desired:
https://www.codeply.com/go/nG6iMAmI2X
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
jQuery to control display of submenus:
$('.dropdown-submenu > a').on("click", function(e) {
var submenu = $(this);
$('.dropdown-submenu .dropdown-menu').removeClass('show');
submenu.next('.dropdown-menu').addClass('show');
e.stopPropagation();
});
$('.dropdown').on("hidden.bs.dropdown", function() {
// hide any open menus when parent closes
$('.dropdown-menu.show').removeClass('show');
});
See this answer for activating the Bootstrap 4 submenus on hover