Menu keeps hiding behind other elements on page - css

Question

I know this seems silly, but this menu is driving me nutty. I've fixed it a few times, but it keeps coming back and biting me in the butt.
The menu looks like this. And as you can see half of it is cut off so you cannot read the words.
I have tried many ways to fix this. I have moved the menu around in the html, tried positioning it and adding a z-index. But I have had no luck.
The html looks like this
<div class="pull-right" style="padding-top: 0px;">
<!-- drop button -->
<div class="btn-group js_editTab-wrapper open" data-bind="attr: { 'data-id' : id, 'data-type' : entityType}" data-id="25402" data-type="KioskPageControl">
<!-- ko if : $data.editTabs -->
<button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropBorder" role="menu" data-bind="foreach: $data.editTabs">
<li>Appearance</li>
<li>Identification</li>
<li>Parameters</li>
<li>Rules</li>
</ul>
<!-- /ko -->
</div>
<span class="drag btn-xs btn-labeled btn-info">
<span class="btn-label"><span class="glyphicon glyphicon-move"></span></span>
</span>
<span class="remove btn-xs btn-labeled btn-danger">
<span class="btn-label"><span class="glyphicon glyphicon-remove"></span></span>
</span>
</div>
and the css for the menu looks like this
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
overflow: visible;
Obviously the display none turns to block when clicked on the dropdown menu and the blue bar does have a z-index on it of 1. Any help would be appreciated!