<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3 shadow-sm fixed-top">
  <a href="#" class="navbar-brand font-weight-bold mr-auto">Logo</a>
  <div id="navbarContent" class="collapse navbar-collapse order-sm-12 order-lg-1">
    <ul class="navbar-nav ml-auto">
      <!-- Megamenu-->
      <li class="nav-item dropdown megamenu"><a id="megamenu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Dropdown Menu</a>
        <div aria-labelledby="megamenu" class="dropdown-menu border-0 p-0 m-0">
          <div class="container-fluid">
            <div class="row bg-dark text-light rounded-0 m-0 shadow-sm">
              <div class="col-12">
                <div class="p-4">
                  <div class="row">
                    <div class="col-sm-6 col-lg-3 mb-4">
                      <h6 class="font-weight-bold text-uppercase">Heading 1</h6>
                      <ul class="list-unstyled">
                        <li class="nav-item"><a href="#" class="nav-link text-small pb-0">Unique Features</a></li>
                        <li class="nav-item"><a href="#" class="nav-link text-small pb-0 ">Image Responsive</a></li>
                        <li class="nav-item"><a href="#" class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                        <li class="nav-item"><a href="#" class="nav-link text-small pb-0 ">Newsletter Form</a></li>
                      </ul>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-4">
                      <h6 class="font-weight-bold text-uppercase">Heading 2</h6>
                      <ul class="list-unstyled">
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li>
                      </ul>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-4">
                      <h6 class="font-weight-bold text-uppercase">Heading 3</h6>
                      <ul class="list-unstyled">
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li>
                      </ul>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-4">
                      <h6 class="font-weight-bold text-uppercase">Heading 4</h6>
                      <ul class="list-unstyled">
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                        <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">About</a></li>
      <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Services</a></li>
      <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Contact</a></li>
    </ul>
  </div>  
  <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler order-md-1">
          <span class="navbar-toggler-icon"></span>
      </button>
</nav>
<header>

</header>
<main>
  <div class="container py-5">
    <div class="row text-center">
      <div class="col-12">
        <h1>Bootstrap 4 Navbar</h1>
        <p class="lead">Display Submenu on Hover</p>
      </div>
    </div>
  </div>  
</main>
<footer>
  <div class="container py-5">
    <div class="row">
      <div class="col-12 text-center">
        <hr>
        <p><a href="https://reezhdesign.com/">ReeZh Design</a></p>
      </div>
    </div>
  </div>
</footer>

/*
 * Main theme
*/
header {
  min-height: 100px;
}
main {
  min-height: 100vh;
}
footer {
  min-height: 100px;
}

.container-fluid {
  margin: 0;
  padding: 0;
  .row {
    margin: 0;
    padding: 0;
  }
}
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.dropdown {
  &:hover {
    > .dropdown-menu {
      display: block;
    }
  }
}
.megamenu {
  position: static;
  .dropdown-menu {
  border: none;
  width: 100%;
  }
}

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);