JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<div id="actionWrapper"><div class="btn-group open">
<button data-href="" class="btn btn-info action">Action</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a data-href="" class="btn btn-info" target="_blank">
1<i class="icon-arrow-right icon-white pull-right"></i>
</a>
</li><li>
<a data-href="" class="btn btn-info" target="_blank">
2<i class="icon-arrow-right icon-white pull-right"></i>
</a>
</li><li>
<a data-href="" class="btn btn-info" target="_blank">
3<i class="icon-arrow-right icon-white pull-right"></i>
...
CSS
#actionWrapper .btn-group {
min-width: 123px !important;
max-width: 123px !important;
margin: 5px 0 0 2px;
display: inline-block;
}
#actionWrapper .btn-group .action {
min-width: 98px !important;
max-width: 98px !important;
}
#actionWrapper .btn-group .dropdown-menu {
padding: 0 !important;
border: none !important;
background-color: transparent !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
#actionWrapper .btn-group ul {
min-width: 123px !important;
max-width: 123px !important;
}
#actionWrapper .btn-group .dropdown-menu a {
margin: 2px 0;
color: #FFFFFF !important;
}