<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="barra"> <ul class="nav nav-tabs"> <li class="dropdown"> <a href="#" data-toggle="dropdown">Avaliação <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Default 4</a></li> <li><a href="#">Default 4</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Qualificação <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Default 4</a></li> <li><a href="#">Default 4</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Benchmarking <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Default 4</a></li> <li><a href="#">Default 4</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Configurar <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Default 4</a></li> <li><a href="#">Default 4</a></li> </ul> </li> </ul> </div>

.barra{ text-align:center; background: #6e797d; } .nav-tabs{ border-bottom:none; display: inline-block; } .nav-tabs a{ color:#FFF; } .nav>li>a:hover, .nav>li>a:focus { background-color: #01c0dc; } .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { background-color: #01c0dc; border-color: #01c0dc; } .nav-tabs>li>a:hover { border-color: #01c0dc #01c0dc #01c0dc; } .nav-tabs .dropdown-menu { background: #9aa4a6; } .dropdown-menu>li>a { color: #FFF; }