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

您放在“.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>

z-index 和转换的问题

1 个答案: