<div class="container">
	<div class="row">
		<div class="col">
      <nav class="navbar navbar-expand-lg navbar-light bg-light py-0">
        <a class="navbar-brand p-1" href="#">SAMPLE</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="nav-item p-1 active">
              <a class="nav-link" href="#">ホーム</a>
            </li>
            <li class="nav-item dropdown dropdown-hover mega-menu p-1">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                メガメニュー
              </a>
              <div class="dropdown-menu m-0 p-0 rounded-0 shadow-sm" aria-labelledby="navbarDropdown">
                <div class="container bg-white p-4">
                  <div class="row">
                    <div class="col-12">col-12</div>
                  </div>
                  <div class="row">
                    <div class="col-1">col-1</div>
                    <div class="col-11">col-11</div>
                  </div>
                  <div class="row">
                    <div class="col-2">col-2</div>
                    <div class="col-10">col-10</div>
                  </div>
                  <div class="row">
                    <div class="col-3">col-3</div>
                    <div class="col-9">col-9</div>
                  </div>
                  <div class="row">
                    <div class="col-4">col-4</div>
                    <div class="col-8">col-8</div>
                  </div>
                  <div class="row">
                    <div class="col-5">col-5</div>
                    <div class="col-7">col-7</div>
                  </div>
                  <div class="row">
                    <div class="col-6">col-6</div>
                    <div class="col-6">col-6</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0 p-1">
            <input class="form-control mr-sm-2" type="search" placeholder="キーワード..." aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
          </form>
        </div>
      </nav>
		</div>
	</div>
</div>
<div class="container">
  <div class="row">
    <div class="col">
      <div class=" bg-light text-dark p-5">
      これは<a href="https://liginc.co.jp/web/design/other-design/86309">メガメニュー</a>のサンプルです。
      </div>
    </div>
  </div>
</div>
body{
  background: black;
}
.mega-menu {
  position: static;
  .dropdown-menu {
    width: 100%;
  }
}

.dropdown-hover .dropdown-menu {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	max-height: 0;
	display: block;
	overflow: hidden;
	opacity: 0;
}
.dropdown-hover:hover .dropdown-menu {
	max-height: 500px;
	opacity: 1;
}

[class^=col-]{
  border: 1px solid #ccc;
  padding: 1rem;
  margin: 0 0 .25rem 0;
}
View Compiled

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
  2. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js