"Dropdown Menu UI"
Bootstrap 3.3.0 Snippet by bharath-c

<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 id="header" class="container"> <div class="row col-md-12"> <div class=" navbar navbar-static-top navbar-custom" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand font-custom text-custom" href="#">Project name</a> </div> <ul class="nav navbar-nav navbar-right nav-custom"> <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> </div> </div> </div> </div> <!-- End of Header -->
.navbar-custom { color: white; background-color: darkblue; } .navbar-nav.navbar-right:last-child { margin-right: 45px !important; } .glyph-custom{ color: blue; background-color: white; } .btn-custom{ position: 10px; margin-left: 5px; margin-right: 5px; margin-top: 8px; padding:7px !important; background-color: white; } .text-custom{ color: white; text-align: center; letter-spacing: 0.25px; } .font-custom{ font-family: Arial, Helvetica, sans-serif; font-size: 1em; } .nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { background:#fff; } .dropdown { background:#fff; border:1px solid #ccc; border-radius:4px; width:300px; } .dropdown-menu>li>a { color:#428bca; } .dropdown ul.dropdown-menu { border-radius:4px; box-shadow:none; margin-top:20px; width:300px; } .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; }

Related: See More


Questions / Comments: