<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Iasmani Pinazo <span class="fa fa-user pull-right"></span></a> <ul class="dropdown-menu"> <li> <a href="#" data-searchtype="search-user" data-placeholder="Enter User Name (first or last)"> <span class="nav-label pull-left">User</span> <span class="glyphicon glyphicon-user"></span> </a> </li> <li class="divider"></li> <li><a href="#">Organization<span class="fa fa-building-o pull-right"></span></a></li> <li class="divider"></li> <li><a href="#">Knowledgebase <span class="fa fa-book pull-right"></span> </a></li> <li class="divider"></li> <li><a href="#">Venue <span class="fa fa-map-marker pull-right"></span> </a></li> <li class="divider"></li> <li><a href="#">Private Label <span class="fa fa-ticket pull-right"></span> </a></li> </ul> </li> </ul> <BR><BR> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" style="outline:1px solid #7F9192; margin-left:10px;"> <span class="glyphicon glyphicon-search"></span> <span class="nav-label"> Search</span> <span class="fa fa-caret-down"></span> </button> <ul id="search-option" class="dropdown-menu pull-left" role="menu"> <li> <a href="#" data-searchtype="search-user" data-placeholder="Enter User Name (first or last)"> <span class="glyphicon glyphicon-user"></span> <span class="nav-label">User</span> </a> </li> <li> <a href="#" data-searchtype="search-org" data-placeholder="Enter Organization Name"> <span class="fa fa-building-o"></span> <span class="nav-label">Organization</span> </a> </li> <li> <a href="#" data-searchtype="search-kb" data-placeholder="Enter Search Terms"> <span class="fa fa-book"></span> <span class="nav-label">KnowledgeBase</span> </a> </li> <li> <a href="#" data-searchtype="search-venue" data-placeholder="Enter Venue Name"> <span class="nav-label">Venue</span> </a> </li> <li> <a href="#" data-searchtype="search-pl" data-placeholder="Enter Private Label"> <span class="fa fa-ticket"></span> <span class="nav-label">Private Label</span> </a> </li> </ul>

body { background:#f0f0f0; } .nav { left:50%; margin-left:-150px; top:50px; position:absolute; } .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; }