<div class="page-wrapper">
	<header class="page-header">
		<div class="header-container">
			<p>
				CSS fullwidth drop down menu. Each submenu stays underneath it's parent item.
				<a href="https://stackoverflow.com/questions/17261421/full-width-css-dropdown-menu">Solution (thanks to Ionică Bizău)</a>
			</p>
		</div>	
		<nav>
			<ul>
				<li>
					<a href="#">Menu 1</a>
					<ul class="sub-nav">
						<li><a href="#">Sub menu1</a></li>
						<li><a href="#">Sub menu2</a></li>
						<li><a href="#">Sub menu3</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Menu 2</a>
					<ul class="sub-nav">
						<li><a href="#">Sub menu1</a></li>
						<li><a href="#">Sub menu2</a></li>
						<li><a href="#">Sub menu3</a></li>
						<li><a href="#">Sub menu4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Menu 3</a>
				</li>
				<li>
					<a href="#">Menu 4</a>
				</li>
			</ul>
		</nav>
	</header>
	<main>
		<section>
		</section>	
	</main>
</div>
.theme-dark {
	margin-top: 0;
	
	p {
		padding: 10px;
		text-align: center;
	}

	.page-wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		
		.page-header {
			background-color: @purple;			
			
			.header-container {
				width: 1132px;
				margin: 0 auto;
				border: 1px dashed @gray-dark;
			}

			nav {
				background-color: @yellow;
				position: absolute;
				width: 100%;
				left: 0;
				
				ul {
					margin: 0 auto;
					padding-left: 20px;
					max-width: 1132px;

					a {
						color: @purple-dark;
						text-decoration: none;
					}
				}
/* == Level 1 == */
				> ul {
					> li { 
						display: inline-block; 
						position: relative;
						padding: 10px;
						z-index: 100;

/* == Level 2 == */
						> ul {
							position: absolute;
							left: 0;
							top: 100%;
							padding: 0.5em 1000em; /* trick from css-tricks comments */
							margin: 0 -1000em; /* trick from css-tricks comments */
							z-index: 101;
							visibility: hidden;
							opacity: 0;
							background: @red;

							> li {
								padding: 5px 0;
								list-style: none;
								margin: 0 12px;
								min-width: 250px;

								a {
									color: @white;
									text-shadow: 1px 1px @black;
								}
							}	
						}
						&:hover > ul {   
							visibility: visible;
							opacity: 1;
							transition: all @base-animation;
						}
					}
				}	
			}			
		}
		main {
			section {
				width: 1132px;
				margin: 0 auto;
				border: 1px dashed @gray-dark;
				min-height: 300px;
			}
		}
	}
}
View Compiled

External CSS

  1. https://codepen.io/Reystleen/pen/wXWYOb.less

External JavaScript

This Pen doesn't use any external JavaScript resources.