将 Bootstrap 下拉菜单置于最前面

Question

我有以下 dom 树：

<ul class="nav">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3 That Has a List</li>
    <ul>
         <li class="sidebar-search">
              <div class="input-group custom-search-form">
                   <input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση...">
                   <span class="input-group-btn">
                        <div class="dropdown">
                            <a id="toolsDrop" href="" role="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" style="padding: 6px 6px 6px 8px;">Filters&nbsp;&nbsp;&nbsp;<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
                                    <li>Filter1</li>
                                    <li>Filter2</li>
                                    <li>Filter3</li>
                                    <li>Filter4</li>
                            </ul>
                        </div>
                   </span>
              </div>
         </li>
         <li>
              <ul class="nav nav-second-level sidebar-device-list">Another list that gets filtered by the dropdown and thus, changes size
              </ul>
         </li>
    </ul>
    <li>Item4</li>
    <li>Item5</li>
</ul>

正如您在这些图片中看到的那样：

，因为<div class="dropdown">在列表中的div下，如果有下拉按钮的列表元素太小，其他列表项将呈现在下拉菜单上方。我已经尝试将下拉菜单的 z-index 设置为 99999 但它不起作用，因为 z-indexes 的工作方式（假设元素有不同的父元素，它们处于不同的堆叠 order/scope as shown in this article).

除了将下拉菜单的位置设置为 fixed 之外，还有什么方法可以将其显示在列表的其余部分上方？ （我不希望它在页面中的所有内容之上，只是在父 ul 的其余元素之上。

Answer 1

使用 z-index 属性 下拉列表的较高值和较小的 z-index 其他 div 需要下降。

Answer 2

尝试为 nav class 提供 z-index:999。它对我有用。

Answer 3

我终于想起原因了：

父元素有overflow-y: hidden

将其设置为 initial/visible 将显示下拉列表。