菜单一直隐藏在页面上的其他元素后面

Question

我知道这看起来很傻，但这个菜单让我疯狂。我已经修好了几次，但它一直回来咬我的屁股。

菜单看起来像这样。正如你所看到的那样，有一半被切断了，所以你无法阅读这些文字。

我尝试了很多方法来解决这个问题。我已经在html中移动了菜单，尝试定位它并添加z-index。但我没有运气。

html看起来像这样

security:
    encoders:
        FOS\UserBundle\Model\UserInterface: bcrypt

并且菜单的css看起来像这样

<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><a href="#" data-bind="text: $data" class="js_editTab noLink">Appearance</a></li>

                <li><a href="#" data-bind="text: $data" class="js_editTab noLink">Identification</a></li>

                <li><a href="#" data-bind="text: $data" class="js_editTab noLink">Parameters</a></li>

                <li><a href="#" data-bind="text: $data" class="js_editTab noLink">Rules</a></li>
              </ul>
              <!-- /ko -->
            </div>
            &nbsp;
            <span class="drag btn-xs btn-labeled btn-info">
                <span class="btn-label"><span class="glyphicon glyphicon-move"></span></span>
            </span>
            &nbsp;
            <span class="remove btn-xs btn-labeled btn-danger">
                <span class="btn-label"><span class="glyphicon glyphicon-remove"></span></span>
            </span>
        </div>

显然，当点击下拉菜单时，显示无变为阻塞，蓝色条的确具有1的z-index。任何帮助都将不胜感激！