CSS dosyamıza dahil etmemiz gereken kod aşağıdaki gibidir,
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}JavaScript dosyamıza dahil etmemiz gereken kod aşağıdaki gibidir,
Not: Aşağıdaki kodun jQuery ve Bootstrap’a ait scriptlerden sonra geldiğinden emin olun.
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
}
var $subMenu = $(this).next('.dropdown-menu');
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass('show');
});
return false;
});Yukarıdaki adımları başarıyla tamamlarsanız Bootstrap 4 dropdown menüsü iç içe açılır yetenekte olacaktır. Tam olarak çalışan bir örneği buraya tıklayarak yada aşağıda Run Pen butonuna tıklayarak test edebilirsiniz. Kolay gelsin.