How To Create Dropdown Inside Dropdown Using Bootstrap

I want to create a drop-down, But I am not sure it is a drop-down or something else coz I am new to HTML environment. What I want to create is When I clicked on the Indian Spices,

Solution 1:

I think this is what you were looking for. You can do the rest bit of the designing yourself. Check the snippet.

$(document).ready(function () {
  $('#head__top').on('click', function(){
    if($('#innerCollapse').is(':visible')) {
      $('#innerCollapse').hide();
    }
  });
  $('#head__sub').on('click', function() {
     $('#innerCollapse').fadeToggle(300);
  });
});

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"rel="stylesheet" /><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"rel="stylesheet" /><divclass="col-sm-12"><h4id="head__top"><aclass="font-weight-normal badge badge-light bg-white"data-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample">Indian Spices</a><spanclass="col-sm-3"></span><spanclass="col-sm-3"></span><iclass="fa fa-angle-down text-fade"data-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample"style="font-size:18px"></i></h4><divclass="collapse"id="collapseExample"><h6id="head__sub"><aclass="dropdown-item"role="button"aria-expanded="false"aria-controls="innerCollapse">Pepper
    <spanclass="col-sm-3"></span><spanclass="col-sm-3"></span><iclass="fa fa-angle-down"aria-hidden="true"data-toggle="collapse"href="#innerCollapse"role="button"aria-expanded="false"aria-controls="innerCollapse"style="font-size:18px"></i></a></h6></div><divclass="collapse col-sm-3"id="innerCollapse"><h6><aclass="dropdown-item">Black Pepper</a><aclass="dropdown-item">White Pepper</a></h6></div></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>