试图使用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，因此总是在它上面。

试试这个：

删除.navbar .nav > li > .dropdown-menu:before。

删除CSS箭头

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

.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;
}

<强>结果：

更改框阴影值以满足您的需求。