html - 尝试使用 z-index 隐藏部分 div

Question

这是我的页面：http ://www.replyonline.co.uk/Brayborne/www/index.html

在主导航上，如果您单击服务，您会看到一个下拉菜单。导航类是.nav nav-pills nav-stacked.

我希望此下拉列表的顶部出现在下方，navbar-wrapper以便我设置的框阴影navbar-wrapper显示在下拉列表中，使其具有如下设计的分层效果：-

任何人都可以提供我可以用来实现这一目标的任何建议或 CSS 吗？此外，如果有帮助，该站点是使用 Bootstrap 构建的。

谢谢，

Answer 1

有点hacky，但应该让你去：

.dropdown-menu {
    z-index: -1;
}

#myCarousel {
    z-index: -2;
}

工作演示：

http://jsfiddle.net/EGmZ5/

Answer 2

z-index 对您没有帮助，因为您的下拉列表在您的内部navbar-wrapper，因此将始终位于它之上。

尝试这个：

通过删除来删除 CSS 箭头.navbar .nav > li > .dropdown-menu:before。

在下拉菜单中，更改以下样式：

.dropdown-menu {
  border-radius: 0 0 6px 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), 0 5px 5px rgba(0, 0, 0, 0.2) inset;
  margin: 0;
  top: 74px;
}

结果：

更改 box-shadow 值以满足您的需要。