<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-static"> <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 class="dropdown dropdown-large"> <a href="#">Some link</a> </li> <li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu dropdown-menu-large row"> <li class="col-sm-6"> <ul> <li class="dropdown-header">Sword of Truth</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li><img class"img-responsive" src="http://placehold.it/200x150"/></li> </ul> </li> <li class="col-sm-6"> <ul> <li class="dropdown-header">Panda</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li class="dropdown-header">Button dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> </ul> </li> <li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu dropdown-menu-large row"> <li class="col-sm-6"> <ul> <li class="dropdown-header">Sword of Truths</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li class="dropdown-header">Theme/Character</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> <li class="col-sm-6"> <ul> <li class="dropdown-header">by brand</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li><img class"img-responsive" src="http://placehold.it/200x150"/></li> </ul> </li> </ul> </li> <li class="dropdown dropdown-large"> <a href="#">Some link</a> </li> <li class="dropdown dropdown-large"> <a href="#">Some link</a> </li> <li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu dropdown-menu-large row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Sword of Truths</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li class="dropdown-header">Theme/Character</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">by brand</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li><img class"img-responsive" src="http://placehold.it/200x150"/></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Sword of Truths</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li class="dropdown-header">Theme/Character</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">by brand</li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li class="divider"></li> <li><img class"img-responsive" src="http://placehold.it/200x150"/></li> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav>

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); body{ font-family: 'Lato', sans-serif; font-weight:300; } .dropdown-large { position: static !important; } .dropdown-menu-large { margin-left: 16px; margin-right: 16px; padding: 20px 0px; } .dropdown-menu-large > li > ul { padding: 0; margin: 0; } .dropdown-menu-large > li > ul > li { list-style: none; } .dropdown-menu-large > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight:300; line-height: 1.428571429; color: #333333; white-space: normal; } .dropdown-menu-large > li ul > li > a:hover, .dropdown-menu-large > li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu-large .disabled > a, .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { color: #999999; } .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-menu-large .dropdown-header { color: #428bca; font-size: 18px; } @media (max-width: 768px) { .dropdown-menu-large { margin-left: 0 ; margin-right: 0 ; } .dropdown-menu-large > li { margin-bottom: 30px; } .dropdown-menu-large > li:last-child { margin-bottom: 0; } .dropdown-menu-large .dropdown-header { padding: 3px 15px !important; } }