防止Bootstrap菜单出现在页脚后面

Question

我设计了一个页面，该页面具有顶部导航，滑块和页脚。在桌面上看起来还不错，但是当我们在移动设备上打开/展开菜单时，菜单位于页脚后面。

[请注意，我们无法在Slider和Footer之间添加额外的空格，以防止出现这种情况，如this中所述

以下是移动设备的屏幕截图：

我们如何解决这个问题？请帮助

谢谢

Answer 1

在CSS中增加下拉菜单的z-index。就像您的下拉菜单是这样的一样：

<div class="dropdown">
  <ul>
    <li><a>Home</a></li>
    <li><a>About Us</a></li>
  </ul>
</div>

您只需要确保下拉菜单的z-index大于页脚元素。您可以尝试增加下拉元素的z-index，如下所示：

.dropdown {
    z-index: 999
 }

请确保下拉菜单在静态位置之外的其他位置才能使z-index生效，而且您赋予它的z-index值应大于页脚元素的z-index值。