Bootstrap v4 navbarを利用してメガメニューを作る

		   

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#">LOGO</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">ホーム <span class="sr-only">(カレント)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー</a>
</li>


<!--ドロップダウンメニュー-->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="DDL1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウンリンク
</a>
<div class="dropdown-menu mega-dropdown-menu" aria-labelledby="DDL1">
<ul class="navbar-nav">
	<li class="nav-link dropdown-item"><a href="#">ドロップダウンリンク</a></li>
	<li class="nav-link dropdown-item"><a href="#">ドロップダウンリンク</a></li>
	<li class="nav-link dropdown-item"><a href="#">ドロップダウンリンク</a></li>

<li class="nav-link dropdown-item dropdown-submenu">
	<a href="#">サブメニュー２</a>
		<div class="dropdown-submenu-menu container-fluid bg-light">
		<div class="row p-2">

			<div class="col-3">
				<div class="card">
				<div class="card-body">
					<h4 class="card-title">カードタイトル</h4>
					<h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
					<p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
					<a href="#" class="card-link bg-light">カードリンク</a>
				</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card">
				<div class="card-body">
					<h4 class="card-title">カードタイトル</h4>
					<h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
					<p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
					<a href="#" class="card-link bg-light">カードリンク</a>
				</div>
				</div>
			</div>

			<div class="col-3">
				<div class="card">
				<div class="card-body">
					<h4 class="card-title">カードタイトル</h4>
					<h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
					<p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
					<a href="#" class="card-link bg-light">カードリンク</a>
				</div>
				</div>
			</div>

			<div class="col-3">
				<div class="card">
				<div class="card-body">
					<h4 class="card-title">カードタイトル</h4>
					<h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
					<p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
					<a href="#" class="card-link bg-light">カードリンク</a>
				</div>
				</div>
			</div>

 

		</div>
		</div>
</li>

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

.mega-dropdown {
		       position: static;
		       }	     
.dropdown-menu.mega-dropdown-menu.show {
		       width: 100%;
		       }
.dropdown-submenu:hover .dropdown-submenu-menu { 
		       visibility: visible;
		       }   

.dropdown-submenu-menu {
		       position: absolute;
		       left: 0;
		       visibility: hidden;
		       } 

 p.card-text {
		       word-wrap: break-word;
		       white-space: pre-line;
		       word-break: break-all;
		       }