Mega menu

* { margin: 0; padding: 0; box-sizing: border-box; }
.nav-bar {
	width: 100%; background: #444; height: 100px; position: relative;
}

.nav-bar .nav-bar-menu-btn {
	width: 100px; height: 100px; background: blue;
	float: right; text-align: center;
	color: #fff;
	cursor: pointer; transition: all 0.4s ease;
}
.nav-bar .nav-bar-menu-btn:hover { color: red; }
.nav-bar .nav-bar-menu-btn:hover .mega-menu { color: #fff; }
.nav-bar .nav-bar-menu-btn .mega-menu li:hover { color: red; }
.header-banner { background: #18bc9c; width: 100%; height: 2350px; }

.mega-menu { 
	position: absolute; top: 0; right: 0;
	width: 100%; height: auto; background: #2c3e50;
	transition: all 0.4s ease;
	padding: 40px;
	visibility: hidden; opacity: 0;
}
.inner-mega-menu { width: 24%; float: left; list-style: none; }
.inner-mega-menu li { padding: 10px 0; text-align: left; transition: all 0.4s ease; }
.nav-bar .nav-bar-menu-btn:hover .mega-menu { 
	visibility: visible; opacity: 1; 
}

<div class="container" style="position: fixed; width: 100%;">
	<nav class="nav-bar">
		  <div class="nav-bar-menu-btn">Menu
		  	<div class="mega-menu">
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  	</div>
		</div>
	</nav>
</div>