<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 ----------> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Iasmani Pinazo <span class="glyphicon glyphicon-user pull-right"></span></a> <ul class="dropdown-menu"> <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right"></span></a></li> <li class="divider"></li> <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right"></span></a></li> <li class="divider"></li> <li><a href="#">Messages <span class="badge pull-right"> 42 </span></a></li> <li class="divider"></li> <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right"></span></a></li> <li class="divider"></li> <li><a href="#">Sign Out <span class="glyphicon glyphicon-log-out pull-right"></span></a></li> </ul> </li> </ul>

.nav{position:absolute;top:50%;left:25%;} .dropdown ul.dropdown-menu:before { content: ""; border-bottom: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -10px; right: 16px; z-index: 10; } .dropdown ul.dropdown-menu:after { content: ""; border-bottom: 12px solid #ccc; border-right: 12px solid transparent; border-left: 12px solid transparent; position: absolute; top: -12px; right: 14px; z-index: 9; }

$(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).fadeIn("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }, function() { $('.dropdown-menu', this).stop( true, true ).fadeOut("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }); });