Responsive, Huge Dropdown Menu Using Only HTML and CSS

Create a huge dropdown menu for sites with very large content without using any JavaScript.

The following code produces the type of menu used on this site; though, it is styled differently. Of course, in production, there will be a separate file for the stylesheet. At 768 pixels and less, this menu disappears and a mobile hamburger menu button appears. This is because this type of menu system does not work well on small screens.

Notice that this menu does not look perfect on Internet Explorer 11 but it is fully functional.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>CSS huge dropdown menu</title>
	<style>
		body {
			background-color: #eee;
			margin: 0;
			padding: 0;
			background-image: url(https://picsum.photos/id/1036/1920/1080);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-family: sans-serif;
		}

		/* DESKTOP CSS */

		nav {
			background-color: #333;
			height: 49px;
		}
		.menu-top {
			margin: 0;
			padding: 0;
			list-style: none;
			text-align: center;
			position: relative;
		}
		.menu-top li {
			display: inline-block;
			width: 85px;
		}
		.menu-top li:hover {
			background-color: #0094ff;
		}
			.menu-top li:hover::after {
				content: "";
				position: absolute;
				border-style: solid;
				border-color: #0094ff transparent transparent transparent;
				border-width: 9px 14px 0 14px;
				bottom: -9px;
				transform: translateX(-16px);
			}
		.menu-top a {
			color: #0094ff;
			text-decoration: none;
			display: block;
			line-height: 49px;
		}
		.menu-top li:hover a {
			color: #fff;
		}
		nav .container {
			max-width: 768px; /* this can be removed for full screen width */
			margin: 0 auto;
		}
		.menu-bottom {
			color: #fff;
			background-color: #00487d;
			position: absolute;
			display: none;
			left: 0;
			right: 0;
			padding: 20px;
			text-align: left;
			max-height: 50vh;
			overflow: auto;
		}
		/* this shows the bottom menus */
		.menu-top li:hover .menu-bottom {
			display: block;
		}
		.menu-bottom li:hover::after {
			display: none;
		}
		.menu-bottom li {
			display: block;
			text-align: left;
			margin-left: 16px;
		}
		.menu-bottom a {
			color: inherit;
			padding: 0;
			background-color: #00487d;
			line-height: 20px;
		}
		.menu-bottom div {
			float: left;
			padding: 16px;
		}
		.menu-bottom ul {
			padding: 16px;
		}
			.menu-bottom ul li > ul {
				padding: 0;
			}
		.menu-bottom h3:first-of-type {
			margin-top: 0;
		}
		.hamburger {
			display: none;
		}

		/* MOBILE CSS */

		@media screen and (max-width: 768px) {
			.hamburger {
				display: block;
				padding: 10px;
				margin: 5px 15px 0 0;
				background-color: #0094ff;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				float: right;
			}
			.hamburger span {
				display: block;
				width: 22px;
				height: 2px;
				border-radius: 1px;
				background-color: #fff;
				margin-top: 4px;
			}
			#mobilechk:checked ~ .menu-top {
				visibility: visible;
				transform: scale(1,1);
			}

				#mobilechk:checked ~ .menu-top a {
					opacity: 1;
					transition: .25s ease-in-out .25s;
				}
			.menu-top { /* this is a ul */
				position: absolute;
				visibility: hidden;
				padding: 0;
				margin: 0;
				list-style: none;
				top: 49px;
				height: auto;
				background-color: #2686dc;
				width: 100%;
				transition: .25s ease-in-out .1s;
				transform: scale(1,0);
				transform-origin: top;
				z-index: 1;
			}

				.menu-top li {
					display: block;
					margin: 0;
					padding: 0;
					text-align: right;
					width: 100%;
				}

				.menu-top a {
					display: inline;
					opacity: 0;
					line-height: 40px;
					font-size: 20px;
					padding-right: 15px;
					transition: .1s ease-in-out;
					color: #eee;
				}

					.menu-top a::after {
						display: none;
					}

				.menu-bottom,
				.menu-top li:hover .menu-bottom {
					display: none;
				}
				.menu-top li:hover {
					background-color: transparent;
				}
		}
	</style>
</head>
<body>
	<header>
		<nav>
			<div class="container">
				<input type="checkbox" id="mobilechk" style="display:none;" />
				<label class="hamburger" for="mobilechk">
					<span></span>
					<span></span>
					<span></span>
				</label>
				<ul class="menu-top">
					<li>
						<a href="#">Home</a>
						<div class="menu-bottom">
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">About</a>
						<div class="menu-bottom">
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Products</a>
						<div class="menu-bottom">
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Cart</a>
						<div class="menu-bottom">
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Contact</a>
						<div class="menu-bottom">
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Forum</a>
						<div class="menu-bottom">
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Search</a>
						<div class="menu-bottom">
							<div>
								<h3>Heading</h3>
								<ul>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
								</ul>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</nav>
	</header>
	<main>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	</main>
</body>
</html>

Coding Video

https://youtu.be/3nPf14WVAuM