Z索引和转换的问题

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>

​

沙箱链接为here

Answer 1

您放在“.tertily-menu”中的“z-index”起作用了。

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

“.category”的背景是透明的，所以下面的“.tertily-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>

​