"CSS3 Mega Menu"
Bootstrap 4.1.1 Snippet by md-ataur

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <center><h2>CSS3 Mega Menu</h2></center> <div class="row"> <div class="menubar col-sm-12 px-0"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a> <div class="mega-menu"> <ul> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Small Storage</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> <li><a href="#">Kichen & dining</a></li> <li><a href="#">Decorative accessories</a></li> </ul> <ul> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> <li><a href="#">Kichen & dining</a></li> </ul> <ul> <li><a href="#">Decorative accessories</a></li> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Small Storage</a></li> <li><a href="#">Lounge Chairs</a></li> </ul> <ul> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> <li><a href="#">Kichen & dining</a></li> </ul> </div> </li> <li><a href="#">Feature</a></li> <li><a href="#">Pages</a> <div class="mega-menu"> <ul> <li><a href="#">Home Page One</a></li> <li><a href="#">Home Page Two</a></li> <li><a href="#">Home Page Three</a></li> <li><a href="#">Home Page Four</a></li> </ul> <ul> <li><a href="#">Shop Grid</a></li> <li><a href="#">Shop List</a></li> <li><a href="#">Shop Detail</a></li> <li><a href="#">Shopping cart</a></li> <li><a href="#">Wishlist</a></li> <li><a href="#">Checkout</a></li> </ul> <ul> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">404</a></li> </ul> <ul> <li><a href="#">2 Colums Blog</a></li> <li><a href="#">Blog Detials</a></li> </ul> </div> </li> </ul> </nav> </div> </div> </div>
.menubar { margin: 10px 0; } .menubar nav ul { margin: 0; padding: 0; list-style: none; } .menubar nav ul li { display: inline-block; margin: 0 20px 0 0; } .menubar nav ul li a { display: block; font-size: 12px; font-family: "Poppins", sans-serif; font-weight: 400; padding: 25px 0; letter-spacing: 0.5px; color: #000000; text-transform: uppercase; text-decoration: none; transition: 0.3s; } .menubar nav ul li:hover > a { text-decoration: none; color: #dd7e2e; } .menubar nav ul li .mega-menu { width: 100%; display: block; position: absolute; top: 100%; background:#ffffff; left: 0; transition: 0.3s; box-shadow: 0px 5px 8px rgba(106, 106, 106, 0.4); border: 1px solid #ebebeb; padding: 24px 30px; visibility: hidden; opacity: 0; } .menubar nav ul li:hover .mega-menu { visibility: visible; opacity: 1; z-index: 99; } .menubar nav ul li .mega-menu ul { width: 25%; float: left; } .menubar nav ul li .mega-menu ul li { display: block; margin: 0; padding: 6px 0px; } .menubar nav ul li .mega-menu ul li a { text-transform: none; font-size: 13px; padding: 0; } @media (max-width: 767.98px) { .menubar nav ul li .mega-menu ul { width: 100%; float: left; margin: 0 0 22px; } } @media (min-width: 768px) { .menubar nav ul li .mega-menu ul { width: 100%; float: left; margin: 0 0 22px; } } @media (min-width: 992px) { .menubar nav ul li .mega-menu ul { width:25%; } }

Related: See More


Questions / Comments: