Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dropdown mega menu with pure CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown mega menu with pure CSS</title>
<style>
.menu {
display: flex;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.menu li {
list-style: none;
}
.menu li a {
padding: 1em;
display: block;
color: black;
text-decoration: none;
}
.menu li a:hover {
color: #336699;
}
.mega-menu {
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
width: 100%;
background: #eee;
opacity: 0;
visibility: hidden;
}
.menu li:hover > .mega-menu {
opacity: 1;
overflow: visible;
visibility: visible;
}
.mega-menu .col {
padding: 1em;
}
.mega-menu .col ul {
margin: 0;
padding: 0;
}
.mega-menu .col li {
margin-bottom: 0.75em;
}
.mega-menu .col h4 {
text-transform: uppercase;
margin: 0 0 1em 0;
}
.mega-menu .col a {
padding: 0;
}
.mega-menu .col img {
display: block;
}
.mega-menu .col p {
margin-bottom: 0;
}
.mega-menu .col strong {
text-transform: uppercase;
}
</style>
</head>
<nav class="nav">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a>
<div class="mega-menu">
<div class="col">
<ul>
<li><a href="#"><h4>Sale</h4></a></li>
<li><a href="#"><h4>Popular</h4></a></li>
<li><a href="#"><h4>Top Brands</h4></a></li>
<li><a href="#">Westelm</a></li>
<li><a href="#">Linwood Oak</a></li>
<li><a href="#">Uptun Palace</a></li>
<li><a href="#">Noel Jones</a></li>
<li><a href="#">5th Avenue</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><h4>Indoor</h4></a></li>
<li><a href="#">Sofa</a></li>
<li><a href="#">Bed Frames</a></li>
<li><a href="#">TV &amp; Entertainment</a></li>
<li><a href="#">Dining Tables</a></li>
<li><a href="#">Desks</a></li>
<li><a href="#">Storage</a></li>
<li><a href="#">Cabinets</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><h4>Outdoor</h4></a></li>
<li><a href="#">Benches</a></li>
<li><a href="#">Tables &amp; Chairs</a></li>
<li><a href="#">Ornaments</a></li>
<li><a href="#">Plant &amp; Garden</a></li>
<li><a href="#">Sheds</a></li>
<li><a href="#">Ponds</a></li>
</ul>
</div>
<div class="col">
<a href="#">
<img src="https://loremflickr.com/cache/resized/65535_50850469708_86a9184210_320_240_nofilter.jpg" alt="" />
<p><strong>Featured Product</strong></p>
</a>
</div>
</div>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
@w3collective

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Mar 11, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment