Css 将引导下拉列表带到前面

我有以下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>

项目1
项目2
有列表的项目3



过滤器1
过滤器2
过滤器3
过滤器4



另一个列表通过下拉菜单过滤，从而改变大小



项目4
项目5

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

，因为

位于列表中的div下，如果具有下拉按钮的列表元素太小，则其他列表项将呈现在下拉菜单上方。我曾尝试将下拉菜单的z-index设置为99999，但由于z-index的工作方式（考虑到元素具有不同的父元素，它们处于不同的堆叠顺序/范围），因此它不起作用

---

除了将下拉菜单的位置设置为“固定”，是否有其他方法将其显示在列表的其余部分上方？（我不希望它高于页面中的所有内容，就在父ul的其余元素之上。

使用

z-index

属性，下拉列表的值越高，需要下降的其他div的z-index越小。

尝试为

nav

类提供

z-index:999

。这对我很有效。

最终版我突然想起了原因：

父元素有

overflow-y:hidden

---

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

你有小提琴吗？请也分享css部分或工作演示，我们可以在那里实时看到问题。ThanxNo，但我会尽快制作一个。