Mega menu

Move the mouse over the second navigation item to see the mega menu.
<div class="container">
<!-- Item -->
...
<!-- An item that triggers displaying the mega menu -->
<div class="container__trigger">
<!-- The trigger item's content -->
<div>...</div>
<!-- Mega menu -->
<div class="container__content">
...
</div>
</div>
</div>
.container {
/* Used to position the mega menu */
position: relative;
}
.container__trigger:hover .container__content {
/* Show the mega menu when hovering the trigger item */
display: block;
}
.container__content {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
margin-top: -1px;
/* Hidden by default */
display: none;
/* Absolute position */
left: 0px;
position: absolute;
top: 100%;
/* Take full width */
width: 100%;
/* Displayed on top of other elements */
background: #fff;
z-index: 9999;
}

See also

Dropdown

Menu

Nested dropdowns