<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> <div class="row"> <nav class="hidden-xs" id="top-navigation" data-role="main-navigation"> <div class="main-nav menuItemContainer "> <ul class="nav col-sm-12 navbar-nav"> <!--<li><a href="#"><img src="images/home.png" /></a> </li>--> <li class="inner"><a href="#">News</a> <div class="dropdown col-md-10 hidden-sm"> <div class="left-col col-md-3"> <ul> <li> <i class="fa fa-bullhorn"></i><a>Today's News</a></li> <li><i class="fa fa-book"></i><a>Most Read</a></li> <li><i class="fa fa-list"></i><a>Recommended</a></li> </ul> </div><!-- End Left-Col --> <div class="right-col">Recommended Coverage</div> </div><!-- end Dropdown --> </li> <li><a href="#">Blog</a> </li> <li class="inner"><a href="#">Commentes</a> <div class="dropdown col-md-10 hidden-sm"> <div class="left-col col-md-3"> <ul> <li> <i class="fa fa-bullhorn"></i><a>Today's News</a></li> <li><i class="fa fa-book"></i><a>Most Read</a></li> <li><i class="fa fa-list"></i><a>Recommended</a></li> </ul> </div><!-- End Left-Col --> <div class="right-col col-md-7">Recommended Coverage</div> </div><!-- End Right-Col --> </li> <li><a href="#">Video</a> </li> <li><a href="#">Resources</a> </li> <li><a href="#">Subscribe</a> </li> <li><a href="#">About</a> </li> <!--<li class="hidden-sm"> <form class="form-inline" role="form"> <span><img src="images/calender-icon.png"></span> <div class="form-group"> <input type="text" class="" id"searh" placeholder="Search"> </div> <button type="submit" class="btn btn-lg"><span class="glyphicon glyphicon-search hidden-sm"></span></button> </form> </li>--> </ul> </div> </nav><!-- end nav --> </div> </div>

nav{ height: 32px; background-color:#000; padding: 7px 0; } ul{padding-left: 0px;} ul li{display: inline;} li:hover .dropdown{ left: 0px; top: auto; } ul li a{ text-decoration: none; padding: 8px; text-transform: uppercase; color: #000; border-right: 1px solid #fff; margin-left: -4px; font-size: 12px; letter-spacing: 0.5px; padding-left: 23px; padding-right: 23px; position: relative; transition: background-color 1s ease; -moz-transition: background-color 1s ease; -webkit-transition: background-color 1s ease; -ms-transition: background-color 1s ease; } a:hover{ text-decoration: none; color: #000; background-color: #b5bcbd; } .dropdown{ position: absolute; float: left; background-color: #000; width: 100%; height: 0; z-index: 9999; opacity: 0.84; /*Check with other browsers*/ filter: alpha(opacity=84); /* For IE8 and earlier */ /*left: -9999px /* Hides the drop down */ /*visibility: hidden*/ margin-top: 3px; overflow: hidden; color: #fff; transition: 1s; } nav ul li:hover .dropdown{ /*left: 0px*/ height: 200px; transition: 1s; /*visibility: visible*/ }