代码见这里：http: //jsfiddle.net/9pezn/
我知道如何使用底部边框进行位置底部负边距技巧，以在其上创建悬停/活动“选项卡”z-index，但在使用框阴影时无法重新创建此效果。有任何想法吗？
IE 我希望主导航选项卡位于 box-shadow 的顶部！我基本上是在尝试复制 Nike.com 导航的功能。例如，当您将鼠标悬停在“Sports”上时，底部的阴影就会被覆盖。
提前致谢！
问问题
1134 次
2 回答
0
我找到了一个我愿意接受的解决方案：http: //jsfiddle.net/LVppY/
斯科特，你在正确的轨道上，它可以用 z-index 完成
于 2012-07-07T09:57:02.763 回答
0
z-index是你的朋友。
将一级导航设置为z-index:1，然后将二级导航设置为z-index:2，它应该位于一级导航的顶部box-shadow。
长话短说，耐克通过一系列巧妙堆叠的图像做到了这一点。我不肯定你可以用原生的盒子阴影实现来做到这一点，原因有两个：
1) box-shadow 与元素的 z-index 相关联，这意味着您不能将 nav1 的子级拉到 nav2 的子级之上，而不会导致 nav1 的 box-shadow 与 nav2 重叠。
2）如果您找到了一种绕过它的方法（也许通过将单独的框阴影应用于每个导航“选项卡”而不是整个容器，那么阴影会稍微重叠，从而导致较暗的斑点。
可能存在我缺少的解决方案，但这是我可能会认输并改用图像的情况之一。
于 2012-07-06T16:43:22.893 回答