Issue with z-index and transform

Question

I am trying to create a dropdown menu with secondary and tertiary sub menus. The sub menus are supposed to slide out from underneath the parent menus. The actual code has several divs nested in multiple levels.

I have added a transform of translateY(700px) to the secondary-menu element to make it slide from underneath the primary-menu. However that causes the tertiary-menu to slide over the secondary-menu and not underneath it.

If the transform is removed the tertiary-menu works fine. A z-index of -1 was provided on tertiary-menu but that does not help. I have tried other combination of z-index on secondary and tertiary menus but it does not work.

There are quite a few related questions on this site but they don't help in my case. Here is the stripped down version of code to recreate the issue:

.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>

The sandbox link is here

Will it help you? - https://stackoverflow.com/questions/33908439/css-transition-and-z-index — s.kuznetsov, Mar 13 '21 at 14:11
@s.kuznetsov, After looking at that thread I am not able to understand how using psuedo elements was helping solve the problem mentioned in that thread. In my case the first level menu placement works, it's the second menu (tertiary menu) that's causing the problem. — A Singh, Mar 13 '21 at 14:48

score 1 · Accepted Answer · answered Mar 15 '21 at 07:48

The 'z-index' you put in the '.tertiary-menu' is working.

The reason it doesn't seem to work is because '.tertiary-menu' is a children of '.category'.

The background of '.category' is transparent, so the '.tertiary-menu' below is visible.

Simply add the background color and height to '.category' and it will look like this.

* {
    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>

Issue with z-index and transform

1 Answers1