<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <header class="header"> <div class="container"> <div class="col-md-3"> <a class="logo" href="#"><img src="http://streamingmuseum.org/assets/uploads/GoogleLogo-web.jpg" alt="sachinkul6185@gmail.com" /></a> </div> <div class="col-md-9"> <div class="navgation"> <ul> <li class="non-mega"><a href="#">Home</a></li> <li class="currnt-menu-item"><a href="#">service</a></li> <li class="non-mega"><a href="#">Conatct us</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Delhi</a></li> <li><a href="#">Mumbai</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Chennai</a></li> <li><a href="#">Hospital</a></li> <li><a href="#">Bollywood</a></li> <li><a href="#">Sahrukah khan</a> </li> <li><a href="#">Passport</a></li> </ul> </li> <li><a href="#">Indian</a></li> <li><a href="#">US /Uk</a></li> <li><a href="#">GULF</a></li> </ul> </li> <li class="non-mega"><a href="#">Conatct</a></li> <li class="non-mega"><a href="#">Blog</a></li> <li class="mega" ><a href="#">Service</a> <ul class="mega-menu-store"> <li> <h2>Custom heading</h2> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> </li> <li> <h2>Custom heading</h2> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> </li> <li> <h2>Custom heading</h2> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> </li> <li> <h2>Custom heading</h2> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Service</a> </li> </ul> </li> <li class="non-mega"><a href="#">Service</a></li> <li class="non-mega"><a href="#">Package</a> <ul> <li><a href="#">Service</a></li> <li><a href="#">Tea Service</a></li> <li><a href="#">Bahubali</a></li> <li><a href="#">Login</a></li> <li><a href="#">Member</a></li> <li><a href="#">Minister</a></li> </ul> </li> <li class="non-mega"><a href="#">Minister</a></li> </ul> </div> </div> </div> </header>

*{ transition: all .5s ease; -moz-transition: all .5s ease; -webkit-transition: all .5s ease;} .logo{margin:5px 0} .header{ width: 100%; float: left; box-shadow: 0 0 5px #888; position: fixed; left: 0; right: 0; z-index: 99999;} .navgation{width:100%;float:left;} .navgation ul{margin:0px;padding:0px;list-style:none;float:right; position: relative;} .navgation ul li{float:left;line-height:90px; } .navgation ul li a{padding: 8px 14px 8px;margin:0 2px;font-size: 14px;text-transform: capitalize;color: #1f1f1f;color:#191919;position: relative;font-weight:600;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;} .navgation ul li a:hover{background:#78bd46;coloR:#fff;text-decoration:none;} .navgation ul li.currnt-menu-item a{background: #78bd46;coloR:#fff;text-decoration:none;} .navgation ul ul{display:none;position:absolute;top:100%;left:0px; right:0; background:#fff;border:1px solid #ccc;width:200px;border-top:2px solid #78bd46} .navgation ul ul:before{ position: absolute; left: 25px; top: -22px; border: 10px solid transparent; border-bottom: 10px solid #78bd46; content: ""; z-index: 9999; } .navgation ul li:hover > ul{display:block;} .navgation ul ul li{ line-height: 20px; display: block; float: none;padding:0 10px;position:relative} .navgation ul ul li a{ padding:10px 0px;display:block; margin:0 0px; border-bottom:1px solid #ccc; font-size: 14px;font-weight:400; border-radius:0; text-transform: uppercase; color: #1f1f1f;} .navgation ul ul li a:hover{background:transparent;coloR:#78bd46;padding-left:5px;} .navgation ul ul li ul{display:none; left:100%;top:0;} .navgation ul ul li:hover > ul{display:block} .navgation ul li.mega ul{width:700px;left:0;} .navgation ul li.non-mega{position:relative;} .navgation ul li.mega .mega-menu-store li{width:25%; float: left;} .navgation ul li.mega .mega-menu-store li h2{margin: 0;padding: 10px 0 0 0;font-size: 17px;line-height: 25px;border-bottom: 2px solid #78bd46;display: inline-block;} .navgation ul li.mega .mega-menu-store li a{padding:5px 0}