如何使用Bootstrap进行多级下拉菜单？

Question

CSS

<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>

HTML

<ul class="list-group">
          <li class="list-group-item">
            <div class="dropright show">
              <a class="dropdown-toggle text-dark" href="#" role="link" id="dropdownMenuLink" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Categories
              </a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Women<span class="caret"></span></a>
              <div class="dropdown-menu">
                <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#"><a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Personal Care Appliances<span class="caret"></span></a>
                <div class="dropdown-menu">
                  <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Hair Dryers<span class="caret"></span></a>
                </div></a><span class="caret"></span></a>
                <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#"><a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Jewellary<span class="caret"></span></a>
                <div class="dropdown-menu">
                  <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Artificial Jewellary<span class="caret"></span></a>
                </div></a><span class="caret"></span></a>
              </div></a>
                <a class="dropdown-item" href="#">Home Furniture</a>
                <a class="dropdown-item" href="#">TVs and Appliances</a>
                <a class="dropdown-item" href="#">Sports, Books & More</a>
                <a class="dropdown-item" href="#">Mobiles and Gadgets</a>
                <a class="dropdown-item" href="#">Men</a>
                <a class="dropdown-item" href="#">Pets</a>
                <a class="dropdown-item" href="#">Baby</a>
                <a class="dropdown-item" href="#">Cars & Bikes</a>
              </div>
            </div>
          </li>
</ul>

JS

<script>
$(document).ready(function(){
  $('.dropdown-submenu .multidrp').on("click", function(e){
    $(this).next('div').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

尊敬的先生，女士：如何使用Bootstrap实现多级下拉菜单？上面是我要向女性展示的代码片段，1.个人护理用具2.珠宝应显示在下拉列表中，个人护理用具应显示，吹风机应显示，珠宝应显示，人造珠宝应显示