Multilevel Dropdown Menu Bootstrap 4

Demo Url : https://bootsnipp.com/snippets/35p8X

Css :
<style type="text/css">
.menu-area{background: #fff}
.dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{color:#000; font-size:16px;text-transform:capitalize;padding:16px 15px;font-family:'Roboto',sans-serif;display: block !important;}
.mainmenu .active a,.mainmenu .active a:focus,.mainmenu .active a:hover,.mainmenu li a:hover,.mainmenu li a:focus ,.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover{color: #000; background: #fff; outline: 0;}


/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a{ background: #fff; color: #ccc; border-radius: 30px; } /* 1 li hover bg */
.mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{background: #fff; border-radius: 30px;} /* 2 hover li */
.mainmenu .collapse ul ul ul > li:hover > a{ background: #fff; color: #ccc; border-radius: 30px; }  /* 3 li hover bg */

/*Box BG */
.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:#fff; border:1px #ddd solid; border-radius: 20px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);}  /* 2 box ul */
.mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{background:#fff; border:1px #ddd solid; border-radius: 20px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);}  /* 3 box ul */
.mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{background:#fff; border:1px #ddd solid; border-radius: 20px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);}  /* 4 box ul */

/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover> ul{display:block}
.mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
}
</style>


Js : 
<script type="text/javascript">
(function($){
$('.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;
});
})(jQuery)
</script>

HTML : 
<nav class="navbar navbar-light navbar-expand-lg mainmenu">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('public/front/images/logo.png') }} " alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

                       
                            <li class="active">
<a  href="{{ url('/') }}">Home</a>
</li>
<li>
<a   href="{{ route('plan.membership') }}">Membership</a>
</li>
<li>
<a   href="{{ route('cmspage','privacy-policy') }}">Privacy Policy</a>
</li>
<li>
<a   href="{{ route('cmspage','area-of-services') }}">Area of services</a>
</li>
                       
<!-- Multi menu code  start -->
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="dropdown">
                                    <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown3</a>
                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                    </ul>
                                </li>
                                </ul>
                            </li>
                            </ul>
                        </li>
<!-- Multi menu code  start -->

                       
                    </ul>
<ul class="navbar-nav ml-auto mt-10">

            @if (Route::has('login'))
               
                    @auth
                      <li class="nav-item">
                        <a class="nav-link login-button" href="{{ route('dashboard') }}">Dashboard</a>
                      </li>
                      <li class="nav-item">
                        <a  title="Logout" class="nav-link logout-button" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-formicon').submit();">
                                       
                                        Logout
                                    </a>
                                    <form id="logout-formicon" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                      </li>
                    @else
                    <li class="nav-item">
      <a class="nav-link login-button" href="{{ route('login') }}">Login</a>
      </li>

                        @if (Route::has('register'))
                           
                            <li class="nav-item">
                <a class="nav-link add-button" href="{{ route('register') }}"> Register</a>
              </li>
                        @endif

                       
                    @endauth
               
            @endif
            <!-- <li class="nav-item">
          <a class="nav-link add-button" href="#"><i class="fa fa-plus-circle"></i> Add Listing</a>
          </li> -->



</ul>
</div>
</nav>