<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-inverse" style="background: #134B90; border:#134B90; z-index: 1;"> <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 navbar-right"> <a style="color:#fff;" class="navbar-brand" href="<?php echo base_url();?>home/index">Home</a> <a style="color:#fff;" class="navbar-brand" href="<?php echo base_url();?>home/aboutUs">About Us</a> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="background: #134B90; color:#fff;">Factory & Products<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu" style="width: 700px;"> <li class="col-sm-4 col-xs-12"> <ul> <li class="dropdown-header">Factory & Products</li> <div id="menCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="<?php echo base_url('resourses/css/images/typical.png');?>" class="img-responsive" alt="product 1"></a> <!-- <h4><small>Summer dress floral prints</small></h4> --> </div> </div> </div> <li class="divider"></li> </ul> </li> <li class="col-sm-4 col-xs-12"> <ul> <li class="dropdown-header">Factory</li> <!-- <li><a href="<?php echo base_url();?>home/plant.html">Plant Facilites</a></li> --> <li><a href="<?php echo base_url();?>home/machincry">Machinery Equipment</a></li> <li><a href="<?php echo base_url();?>home/fGallery">Factory Gallery</a></li> </ul> </li> <li class="col-sm-4 col-xs-12"> <ul> <li class="dropdown-header">Products</li> <li><a href="<?php echo base_url();?>home/products">Our Products</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="background: #134B90; color:#fff;">Our Activities<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu" style="width: 700px;"> <li class="col-sm-4 col-xs-12"> <ul> <li class="dropdown-header">Projects</li> <li><a href="<?php echo base_url();?>home/oProject">Ongoing Projects</a></li> <li><a href="<?php echo base_url();?>home/cProject">Completed Projects</a></li> <li><a href="<?php echo base_url();?>home/clients">Clients & Projects</a></li> <li class="divider"></li> <li class="dropdown-header">Gallery</li> <li><a href="<?php echo base_url();?>home/image">Image</a></li> <li><a href="<?php echo base_url();?>home/video">Video</a></li> </ul> </li> <li class="col-sm-4 col-xs-12"> <ul> <li class="dropdown-header">Sister Concern</li> <li><a href="<?php echo base_url();?>home/partners">Our Sister Concern</a></li> </ul> </li> <li class="col-sm-4 col-xs-12"> <ul> <li class="dropdown-header">Activity</li> <div id="menCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="<?php echo base_url('resourses/css/images/pe001.jpg');?>" class="img-responsive" alt="product 1"></a> <!-- <h4><small>Summer dress floral prints</small></h4> --> </div> </div> </div> <li class="divider"></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="background: #134B90; color:#fff;">Services<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu" style="width: 400px;"> <li class="col-sm-6 col-xs-12"> <ul> <li class="dropdown-header">Solutions</li> <li><a href="<?php echo base_url();?>home/csslDcode">CSSL Range of Services</a></li> <li><a href="<?php echo base_url();?>home/quality">Quality Policy</a></li> <li><a href="<?php echo base_url();?>home/csslSolution">CSSL One Stop Solution</a></li> <li class="divider"></li> <li class="dropdown-header">Support</li> <li><a href="<?php echo base_url();?>home/support">Our Support</a></li> </ul> </li> <li class="col-sm-6 col-xs-12"> <ul> <li class="dropdown-header">Services</li> <div id="menCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="<?php echo base_url('resourses/css/images/pe002.jpg');?>" alt="product 1"></a> <!-- <h4><small>Summer dress floral prints</small></h4> --> </div> </div> </div> <li class="divider"></li> <li class="dropdown-header">Clients Support</li> <li><a href="<?php echo base_url();?>home2/login">Login</a></li> </ul> </li> </ul> </li> <li class="dropdown"> <a href="#" style="background: #134B90; color:#fff;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="<?php echo base_url();?>home/contractUs">Contact</a></li> <li><a href="<?php echo base_url();?>home2/quarry">Inquiry</a></li> </ul> </li> <a style="color:#fff;" class="navbar-brand" href=""></a> </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'; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .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; color: #222; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .carousel-control { width: 30px; height: 30px; top: -35px; } .left.carousel-control { right: 30px; left: inherit; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd; }

$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); $(this).toggleClass('open'); } ); });