无法让 CSS 下拉导航仅在主页上浏览内容

Question

我只对主页上的菜单有疑问。

当我将鼠标悬停在“替换零件”类别上时，下拉菜单完美地越过滑块而不是文本内容。我不知道如何用 CSS 修复。

请帮忙！

https://www.trampolineandparts.co.uk/

谢谢

Answer 1

您需要修改以下内容：

body.cms-home .main-container {
    padding: 0px;
    z-index: 10000;  /*remove this*/
}

main-container 的 z-index 将其堆叠顺序设置为高于下拉菜单的堆叠顺序。

乍一看，您似乎不需要在此处定义z-index。所以继续删除它。

您的代码中似乎也经常使用z-index。不知道为什么——除非您处理复杂的布局，否则您通常不需要更改它。

查看MDN documentation 或W3Schools：

z-index 属性指定元素的堆叠顺序。

堆栈顺序较大的元素总是在堆栈顺序较低的元素之前。

注意： z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

另外，也许您应该考虑使用框架，因为这会使您更轻松地管理布局。 Bootstrap，例如。祝你好运。