<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> <a class="navbar-brand" href="#">Home</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Show Products <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul class="list-group"> <li class="list-group-item">Industryt 1 <a><i class="fa fa-times pull-right fa-lg"></i></a></li> <li class="list-group-item">Industry 2 <a><i class="fa fa-times pull-right fa-lg"></i></a> </li> <li class="list-group-item">Industry 3 <a><i class="fa fa-times pull-right fa-lg"></i></a></li> <li class="list-group-item">Industry 4 <a><i class="fa fa-times pull-right fa-lg"></i></a></li> </ul> </li> <li class="col-sm-3"> <ul class="list-group"> <li class="list-group-item">Industryt 1 <a><i class="fa fa-times pull-right fa-lg"></i></a></li> <li class="list-group-item">Industry 2 <a><i class="fa fa-times pull-right fa-lg"></i></a> </li> <li class="list-group-item">Industry 3 <a><i class="fa fa-times pull-right fa-lg"></i></a></li> <li class="list-group-item">Industry 4 <a><i class="fa fa-times pull-right fa-lg"></i></a></li> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div>

body { font-family: 'Open Sans', 'sans-serif'; background:#fff; } .navbar-nav>li>.dropdown-menu { margin-top:20px; border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li>a { width:200px; font-weight:bold; } .mega-dropdown { position: static !important; width:100%; } .mega-dropdown-menu { padding: 20px 0px; width: 80%; 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: 205px; 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: 203px; z-index: 8; }

jQuery(document).on('click', '.mega-dropdown', function(e) { e.stopPropagation() })