html - 下拉对齐

Question

我在表格的列标题中有一个下拉菜单。下拉元素如下图

<button class="btn btn-default dropdown-toggle grad1" >
    <b>Impact</b><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>    
  <ul class="dropdown-menu" role="menu" style="position:relative;top:inherit;left:inherit;cursor:pointer">
    <li><a ng-click="filterImpact('')">All</a></li>
    <li><a ng-click="filterImpact('H')">High</a></li>
    <li><a ng-click="filterImpact('M')">Medium</a></li>
    <li><a ng-click="filterImpact('L')">Low</a></li>
  </ul>

但是下拉菜单没有附加到主菜单。即，如果我向下滚动，则下拉菜单将保留在同一位置，并且不会与标题一起向上移动。显而易见的解决方案是制作

position:relative

但在那种情况下，选项隐藏在表格后面，用户无法访问。我在这里遗漏了一些 css ..请帮助:)

更新

到目前为止已经尝试过了。

     position:absolute,fixed,relative

和

     z-index:2000 //so it surpasses all elements.

更新

让事情变得更简单 here是普拉克。选择性别下拉菜单在这里不起作用。

Answer 1

尝试将 display: inline; 添加到您的样式中。