Mega Menu examples HTML CSS

Here is an example of a mega menu using HTML and CSS:

HTML

<nav class="menu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">About</a> <div class="mega-menu"> <div class="menu-col"> <h3>Our Company</h3> <ul> <li><a href="#">History</a></li> <li><a href="#">Mission & Values</a></li> <li><a href="#">Leadership</a></li> </ul> </div> <div class="menu-col"> <h3>Our Services</h3> <ul> <li><a href="#">Consulting</a></li> <li><a href="#">Training</a></li> <li><a href="#">Support</a></li> </ul> </div> <div class="menu-col"> <h3>Contact Us</h3> <ul> <li><a href="#">Phone</a></li> <li><a href="#">Email</a></li> <li><a href="#">Location</a></li> </ul> </div> </div> </li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

CSS

<nav class="menu"> .menu { display: flex; align-items: center; justify-content: center; } .menu ul { display: flex; list-style: none; margin: 0; padding: 0; } .menu li { position: relative; } .menu a { display: block; padding: 10px 20px; text-decoration: none; color: #333; } .menu .mega-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1; width: 500px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .menu .mega-menu .menu-col { float: left; width: 33.33%; padding: 20px; } .menu .mega-menu .menu-col h3 { margin: 0; font-size: 14px; text-transform: uppercase; color: #777; } .menu .mega-menu .menu-col ul { margin: 0; padding: 0; list-style: none; } .menu .mega-menu .menu-col li { margin: 5px 0; } .menu .mega-menu .menu-col a { color: #777; } .menu li:hover .mega-menu { display: block; }