<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">American Pharoah</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apparel & Accessories<span class="glyphicon glyphicon-chevron-down"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-4"> <ul> <li class="divider"></li> <li class="dropdown-header">Apparel</li> <li class="divider"></li> <li><a href="#">Unisex</a></li> <li><a href="#">Mens</a></li> <li><a href="#">Ladies & Juniors</a></li> <li><a href="#">Kids</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="divider"></li> <li class="dropdown-header">Headwear</li> <li class="divider"></li> <li><a href="#">Derby Hats</a></li> <li><a href="#">Fascinators</a></li> <li><a href="#">Caps</a></li> <li><a href="#">Fall Hats</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="divider"></li> <li class="dropdown-header">Jewelry</li> <li class="divider"></li> <li><a href="#">Earings & Brooches</a></li> <li><a href="#">Bracelets & Rings</a></li> <li><a href="#">Necklaces</a></li> <li><a href="#">Charms & Pendants</a></li> <li><a href="#">Darren K. Moore Collection</a></li> <li class="divider"></li> <li class="dropdown-header">Accessories</li> <li class="divider"></li> <li><a href="#">Mens</a></li> <li><a href="#">Fashion</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home Goods<span class="glyphicon glyphicon-chevron-down"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-4"> <ul> <li class="divider"></li> <li class="dropdown-header">Books & Media</li> <li class="divider"></li> <li><a href="#">Books</a></li> <li><a href="#">Videos</a></li> <li class="divider"></li> <li class="dropdown-header">Decorating & Artwork</li> <li class="divider"></li> <li><a href="#">Ornaments</a></li> <li><a href="#">Artwork</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="divider"></li> <li class="dropdown-header">Dining & Entertaining</li> <li class="divider"></li> <li><a href="#">Glassware & Bar</a></li> <li><a href="#">Edible Goods</a></li> <li><a href="#">Tableware & Linens</a></li> <li><a href="#">Party Supplies</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="divider"></li> <li class="dropdown-header">Gifts</li> <li class="divider"></li> <li><a href="#">Ornaments</a></li> <li><a href="#">Gift Baskets</a></li> <li><a href="#">Gift Cards</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Souvenirs & Collectibles<span class="glyphicon glyphicon-chevron-down"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="divider"></li> <li class="dropdown-header">Souvenirs</li> <li class="divider"></li> <li><a href="#">Lanyards & Keychains</a></li> <li><a href="#">Magnets</a></li> <li><a href="#">Ornaments</a></li> <li><a href="#">Toys & Games</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="divider"></li> <li class="dropdown-header">Collectibles</li> <li class="divider"></li> <li><a href="#">Artwork</a></li> <li><a href="#">Glassware</a></li> <li><a href="#">Lapel Pins</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="divider"></li> <li class="dropdown-header">Specialty</li> <li class="divider"></li> <li><a href="#">Triple Crown</a></li> <li><a href="#">Secretariat</a></li> <li><a href="#">Bourbon</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="divider"></li> <li class="dropdown-header">Winners Tac Pins</li> <li class="divider"></li> <li><a href="#">1870's</a></li> <li><a href="#">1880's</a></li> <li><a href="#">1890's</a></li> <li><a href="#">1900's</a></li> <li><a href="#">1910's</a></li> <li><a href="#">1920's</a></li> <li><a href="#">1930's</a></li> <li><a href="#">1940's</a></li> <li><a href="#">1950's</a></li> <li><a href="#">1960's</a></li> <li><a href="#">1970's</a></li> <li><a href="#">1980's</a></li> <li><a href="#">1990's</a></li> <li><a href="#">2000's</a></li> <li><a href="#">2010's</a></li> </ul> </li> </ul> </li> <li><a href="#">Sale</a></li> </ul> </div><!-- /.nav-collapse --> </nav> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background:#f0f0f0; } .glyphicon { display:block; text-align:center; font-size:50%; } .navbar-nav>li>.dropdown-menu { /* margin-top:20px; */ border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li>a { } .navbar-brand { font-weight:bold; } nav { display: flex; justify-content: center; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } /* .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } */ .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight:bold; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; }