<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"> <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="http://www.pakoil.com.pk/">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">About Us <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu" id='about_us_dropdown'> <li class="col-sm-12"> <ul class='list-inline'> <li><a href="#">Overview</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Boards of Directors</a></li> <li><a href="#">Our Management Team</a></li> <li><a href="about_pol/subsidiary.html">Subsidiary</a></li> <li><a href="about_pol/agoc.html">Attock Group of Companies</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Business <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu list-unstyled list-inline"> <li class="col-sm-12"> <ul class='list-unstyled list-inline'> <li><a href="our_business/expprod.html">Exploration & Production</a></li> <li><a href="our_business/mkt.html">LPG Marketing</a></li> <li><a href="our_business/products.html">Products</a></li> <li><a href="our_business/quality.html">Quality</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Responsibility <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu list-unstyled list-inline"> <li class="col-sm-12"> <ul class='list-unstyled list-inline'> <li><a href="social_responsibility/community.html" class="dir">Community Involvement</a></li> <li><a href="social_responsibility/hse.html" class="dir">Health, Safety & Environment</a></li> <li><a href="social_responsibility/busethic.html" class="dir">Business Ethics</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Investor Relations <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu list-unstyled list-inline"> <li class="col-sm-12"> <ul class='list-unstyled list-inline'> <li><a href="investor_relations/govern.html" class="dir">Governance</a></li> <li><a href="investor_relations/perf.html" class="dir">Performance</a></li> <li><a href="investor_relations/investfaq.html" class="dir">Investor FAQ's</a></li> <li><a href="investor_relations/investlink.html" class="dir">Investor Links</a></li> <li><a href="investor_relations/investorsinfo.html" class="dir">Investors Information</a></li> <li><a href="investor_relations/electionofdirectors.html" class="dir">Election of Directors</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Working at POL <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu list-unstyled list-inline"> <li class="col-sm-12"> <ul class='list-unstyled list-inline'> <li><a href="workingatpol/corevalue.html" class="dir">Core Values</a></li> <li><a href="workingatpol/workenvironment.html" class="dir">Work Environment</a></li> <li><a href="workingatpol/trainingdev.html" class="dir">Training & Development</a></li> <li><a href="workingatpol/career.html" class="dir">Career Opportunities</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Media <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu list-unstyled list-inline"> <li class="col-sm-12"> <ul class='list-unstyled list-inline'> <li><a href="media/media.html#awardsandrecognition">Awards & Recognition</a></li> <li><a href="media/media.html#announcements">Announcements</a></li> <li><a href="media/media.html#industrymembership">Industry Associates</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Us <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu list-unstyled list-inline"> <li class="col-sm-12"> <ul class='list-unstyled list-inline'> <li><a href="contactus/contact.html">Contact Details</a></li> <li><a href="contactus/comment.html">Your Comments</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'; } .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'); } ); $('#about_us_dropdown').slideDown(); $('#about_us_dropdown').toggleClass('open'); });