Bootstrap 4 nested dropdown?

Question

What I am trying to do is if anyone click on arts then History sociology and geography submenu should show up. It should now appear when someone clicks on Arts.
https://

Answer 1

I think this is kinda what you are looking for.

Your updated code with one of the suggestions given in there would look something like the example given.

(If you use Angular you could use ngx-dropdowns they have a solution for nested dropdowns)

$('.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;
});

.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;
}

  
  
  

  
  

  



  

    
                    Select Streams
                  
    

      
Science
      
Commerce
      
Arts
        

          
History
          
Geography
          
Sociology