<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="#">CSOT - Application Services</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">Service Offerings <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Architecture Services</li> <li><a href="#">1. Architecture Assessments</a></li> <li><a href="#">2. Application Disposition</a></li> <li><a href="#">3. Roadmaps and Strategy</a></li> <li><a href="#">4. Solution Architecture</a></li> <li><a href="#">5. Data Architecture</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Data Services</li> <li><a href="#">1.Metadata Repository (MDR) </a></li> <li><a href="#">2. Data Modelling</a></li> <li><a href="#">3. Data Mapping</a></li> <li><a href="#">4. Data Analysis</a></li> <li><a href="#">5. Data Lineage</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Security Services</li> <li><a href="#">1. Enterprise Authorization</a></li> <li><a href="#">2. Authentication Gateway</a></li> <li><a href="#">3. Multi-factor Authentication</a></li> <li><a href="#">4. Internal/External Users</a></li> <li><a href="#">5. Application Authentication</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Integration Services</li> <li><a href="#">1. Service Routing</a></li> <li><a href="#">2. Orchestration & Transformation</a></li> <li><a href="#">3. Event Messaging</a></li> <li><a href="#">4. data Access Simplification</a></li> <li><a href="#">5. Customer / Business Validation</a></li> </ul> </li> </ul> </li> </ul> </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">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> <li class="dropdown-header">Product Menu Option</li> <li><a href="#">1. Product 1 </a></li> <li><a href="#">2. Product 2</a></li> <li><a href="#">3. Product 3</a></li> <li><a href="#">4. Product 4</a></li> <li><a href="#">5. Product 5</a></li> </ul> </li> </ul> </li> </ul> </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">APIs / Services<span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Service Menu Option</li> <li><a href="#">1. Services 1 </a></li> <li><a href="#">2. Services 2</a></li> <li><a href="#">3. Services 3</a></li> <li><a href="#">4. Services 4</a></li> <li><a href="#">5. Services 5</a></li> </ul> </li> </ul> </li> </ul> </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">On-boarding<span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">On-boarding Menu Option</li> <li><a href="#">1. On-boarding 1 </a></li> <li><a href="#">2. On-boarding 2</a></li> <li><a href="#">3. On-boarding 3</a></li> <li><a href="#">4. On-boarding 4</a></li> <li><a href="#">5. On-boarding 5</a></li> </ul> </li> </ul> </li> </ul> </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">Other<span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Other Menu Option</li> <li><a href="#">1. Other 1 </a></li> <li><a href="#">2. Other 2 </a></li> <li><a href="#">3. Other 3</a></li> <li><a href="#">4. Other 4</a></li> <li><a href="#">5. Other 5</a></li> </ul> </li> </ul> </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; background: url(https://pcbx.us/bfjb.jpg); } h1, .h1 { font-size: 36px; text-align: center; font-size: 5em; color: #404041; } .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: 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; }

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