我有一个带有阴影效果的标题条并包含导航链接；当您将鼠标悬停在它们上方时，会出现一个子菜单。
如何使子菜单出现在标题条后面的图层上？我需要将标题的框阴影投射到子菜单的顶部。
目前子菜单 ( .main-navigation li ul) 的 z-index 低于标题条 ( .site-header) 但这没有任何效果。我试过给它一个负 z-index 但这将它放在内容后面（因此隐藏）并且链接不再起作用 - 我读过这是一个常见问题，所以我想避免使用负 z-指数。
希望你能帮忙。
问问题
466 次
1 回答
1
由于元素的堆叠上下文， Z-index 在这种情况下可能不是解决方案。在不重新排序 html 的情况下，您可以在附加到子菜单的伪元素上使用 box-shadow 来尝试这个技巧。例如：
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
检查这个演示。请注意，这只是一种可能的解决方案，因为可能还有其他方法可以达到相同的效果。
文本内容应该已经自然地出现在标题的阴影后面，因为它是相邻的兄弟元素，在 html 中的标题之后排序。（我在演示中的内容 div 中添加了背景图像以显示这一点。）
于 2013-09-23T10:41:15.767 回答