<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 ----------> <div class="btn-group btn-group-info"> <button class="btn btn-info" type="button">Info</button> <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button"><span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

.btn-group .dropdown-menu a{ color:#fff; } .btn-default .dropdown-menu { color: #000 !important; } .btn-default .dropdown-menu li > a:hover, .btn-default .dropdown-menu li > a:focus { background-color: #000 !important; color:#fff !important; } .btn-group-info .dropdown-menu { background-color: #4ebbdb !important; } .btn-group-info .dropdown-menu li > a:hover, .btn-group-info .dropdown-menu li > a:focus { background-color: #5bc0de !important; }