Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This simple mega navigation menu is inspired by the many mega menus on retail and other websites.
<!DOCTYPE html>
<html>
<head>
<title>CSS Mega-Menu</title>
<link type="text/css" rel="stylesheet" href="css-mega-menu.css" />
</head>
<body>
<nav>
<ul class="first">
<li class="active"><a href="#">Shop My Store</a></li>
<li><a href="#">Outlets</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="second">
<li>
<a href="#">Clothing</a>
<article>
<section>
<h2>Women's Clothing</h2>
<p><a href="#">Shirts</a></p>
<p><a href="#">Pants</a></p>
<p><a href="#">Skirts</a></p>
<p><a href="#">Dresses</a></p>
<p><a href="#">Suits</a></p>
</section>
<section>
<h2>Men's Clothing</h2>
<p><a href="#">Shirts</a></p>
<p><a href="#">Pants</a></p>
<p><a href="#">Suits</a></p>
<p><a href="#">Ties</a></p>
</section>
<section>
<h2>Kids's Clothing</h2>
<p><a href="#">Shirts</a></p>
<p><a href="#">Pants</a></p>
<p><a href="#">Skirts</a></p>
<p><a href="#">Suits</a></p>
</section>
<section class="banner">
<img src="http://placekitten.com/g/150/150" />
</section>
</article>
</li>
<li>
<a href="#">Accessories</a>
<article>
<section>
<h2>Outerwear</h2>
<p><a href="#">Coats</a></p>
<p><a href="#">Hats</a></p>
<p><a href="#">Scarves</a></p>
<p><a href="#">Gloves</a></p>
</section>
<section>
<h2>Jewelry</h2>
<p><a href="#">Necklaces</a></p>
<p><a href="#">Bracelets</a></p>
<p><a href="#">Rings</a></p>
<p><a href="#">Watches</a></p>
</section>
<section>
<h2>Bags</h2>
<p><a href="#">Handbags</a></p>
<p><a href="#">Totes</a></p>
<p><a href="#">Luggage</a></p>
<p><a href="#">Wallets</a></p>
<p><a href="#">Keychains</a></p>
</section>
</article>
</li>
<li>
<a href="#">Shoes</a>
<article>
<section>
<h2>Women's Shoes</h2>
<p><a href="#">Flats</a></p>
<p><a href="#">Heels</a></p>
<p><a href="#">Boots</a></p>
<p><a href="#">Sneakers</a></p>
</section>
<section>
<h2>Men's Shoes</h2>
<p><a href="#">Loafers</a></p>
<p><a href="#">Dress Shoes</a></p>
<p><a href="#">Boots</a></p>
<p><a href="#">Sneakers</a></p>
</section>
<section class="banner">
<img src="http://placekitten.com/150/150" />
</section>
</article>
</li>
<li>
<a href="#">Kitchen</a>
<article>
<section>
<h2>Tableware</h2>
<p><a href="#">Plates</a></p>
<p><a href="#">Glasses</a></p>
<p><a href="#">Mugs</a></p>
<p><a href="#">Silverware</a></p>
</section>
<section>
<h2>Serveware</h2>
<p><a href="#">Trays</a></p>
<p><a href="#">Bowls</a></p>
<p><a href="#">Platters</a></p>
</section>
<section>
<h2>Cookware</h2>
<p><a href="#">Pots</a></p>
<p><a href="#">Pans</a></p>
<p><a href="#">Utensils</a></p>
</section>
<section>
<h2>Appliances</h2>
<p><a href="#">Coffee Makers</a></p>
<p><a href="#">Mixers</a></p>
<p><a href="#">Blenders</a></p>
<p><a href="#">Gadgets</a></p>
</section>
</article>
</li>
<li>
<a href="#">Bed & Bath</a>
<article>
<section>
<h2>Bed Sheets</h2>
<p><a href="#">Twin</a></p>
<p><a href="#">Full</a></p>
<p><a href="#">Queen</a></p>
<p><a href="#">King</a></p>
</section>
<section>
<h2>Towels</h2>
<p><a href="#">Bath Towels</a></p>
<p><a href="#">Hand Towels</a></p>
<p><a href="#">Tea Towels</a></p>
<p><a href="#">Washcloths</a></p>
</section>
</article>
</li>
</ul>
</nav>
</body>
</html>
/*
* -- CSS-only Mega Menu
*
*/
nav { width: 100%; }
nav a { text-decoration: none; }
/* -- Navigation menu - common styles for first and second levels -- */
nav > ul { clear: both; width: 100%; }
nav > ul li { float: left; }
nav > ul li > a { display: block; }
/* -- Navigation menu - first level -- */
nav > ul.first li > a { background: #DDD; border-left: 1px solid #BBB; color: #000; padding: 10px 30px 15px 30px; text-transform: uppercase; }
nav > ul.first li > a:hover { background: #CCC; }
nav > ul.first li:first-child > a { border-left: 0; }
nav > ul.first li.active > a { background: #444; color: #FFF; }
/* -- Navigation menu - second level -- */
nav > ul.second { background: #444; border: 1px solid #444; display: block; height: 25px; position: relative; }
nav > ul.second li > a { color: #FFF; padding: 7px 30px; }
nav > ul.second li:hover > a { background: #FFF; color: #000; }
/* -- Navigation menu - third level -- */
nav > ul.second article { display: none; }
nav > ul.second li:hover > article { border: solid #444; border-width: 0 1px 1px 1px; display: block; left: 0; margin-left: -1px; position: absolute; width: 100%; }
nav section { float: left; margin-right: 20px; padding: 20px; }
nav section h2 { font-weight: bold; margin: 5px 0; text-transform: uppercase; }
nav section p { margin: 8px 0; }
nav section a { color: #000; }
nav section a:hover { text-decoration: underline; }
nav section.banner { float: right; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment