z-index 和变换问题

Question

我正在尝试创建一个带有二级和三级子菜单的下拉菜单。 子菜单应该从父菜单下方滑出。 实际代码有多个嵌套在多个级别中的 div。

我已将translateY(700px)的转换添加到辅助菜单元素，以使其从主菜单下方滑动。 但是，这会导致三级菜单滑过二级菜单，而不是在其下方。

如果删除了转换，则第三级菜单可以正常工作。 在三级菜单上提供了 -1 的z-index但这无济于事。 我在二级和三级菜单上尝试了 z-index 的其他组合，但它不起作用。

这个网站上有很多相关的问题，但对我来说没有帮助。 这是重新创建问题的精简版代码：

 .primary-menu { position: relative; margin-left: 50px; z-index: 100; background-color: grey; height: 50px; padding: 20px; }.primary-menu:hover~.secondary-menu { transform: translateY(0); visibility: visible; height: 500px; }.secondary-menu:hover { transform: translateY(0); visibility: visible; height: 500px; /* actually height is not known in advance, this value is put here just for this example */ }.secondary-menu { position: absolute; width: 150px; top: 50px; left: 50px; background-color: red; transform: translateY(-700px); transition: transform 1s; visibility: hidden; }.category { padding: 20px; position: relative; }.tertiary-menu { position: absolute; left: 100%; visibility: hidden; padding: 20px; top: 0; left: 0; transition: left 1s; z-index: -1; background-color: hotpink; }.category:hover.tertiary-menu { visibility: visible; left: 100%; }

 <div class="primary-menu">Menu</div> <div class="secondary-menu"> <div class="category"> <h4>Mobiles</h4> <div class="tertiary-menu"> <div class="sub-category"> <h4>Smartphones</h4> <div class="product-types">Mobile Cases, Covers</div> <div class="product-types">Power Banks</div> </div> <div class="sub-category"> <h4>Feature Phones</h4> <div class="product-types">Samsung</div> </div> </div> </div> </div>

沙盒链接在这里

Answer 1

您放入“.tertiary-menu”的“z-index”正在工作。

它似乎不起作用的原因是因为“.tertiary-menu”是“.category”的子级。

“.category”的背景是透明的，所以下面的“.tertiary-menu”是可见的。

只需将背景颜色和高度添加到“.category”，它就会看起来像这样。

 * { margin: 0; padding: 0; box-sizing: border-box; }.primary-menu { position: relative; margin-left: 50px; z-index: 100; background-color: grey; height: 50px; padding: 20px; }.primary-menu:hover~.secondary-menu { transform: translateY(0); visibility: visible; height: 500px; }.secondary-menu:hover { transform: translateY(0); visibility: visible; height: 500px; /* actually height is not known in advance, this value is put here just for this example */ }.secondary-menu { position: absolute; width: 150px; top: 50px; left: 50px; background-color: red; transform: translateY(-700px); transition: transform 1s; visibility: hidden; }.category { padding: 20px; position: relative; height: 100%; background-color: blue; }.tertiary-menu { position: absolute; left: 100%; visibility: hidden; padding: 20px; top: 0; left: 0; transition: left 1s; z-index: -1; background-color: hotpink; }.category:hover.tertiary-menu { visibility: visible; left: 100%; }

 <div class="primary-menu">Menu</div> <div class="secondary-menu"> <div class="category"> <h4>Mobiles</h4> <div class="tertiary-menu"> <div class="sub-category"> <h4>Smartphones</h4> <div class="product-types">Mobile Cases, Covers</div> <div class="product-types">Power Banks</div> </div> <div class="sub-category"> <h4>Feature Phones</h4> <div class="product-types">Samsung</div> </div> </div> </div> </div>