Search code examples
csscss-animationsz-index

Positioning Sub Nav Menu Underneath Main Nav

I'm using CSS transition to do a dropdown menu. The animation itself works however I'm having issues with the sub nav appearing on top of the main nav.

I tried adding a high z-index on the main menu link, but this doesn't work:

.navUl li a {
  z-index:9999;
}

Subnav code:

.navUl li ul {
  background-color: green;
  width: 264px;
  position: absolute;
  overflow: hidden;
  top: -200px;
  height: 200px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

So how do I get the sub nav sliding down underneath the main nav?

Here's the link for reference

Solution

  • Add z-index : -1 to Subnav :

    .navUl li ul {
  background-color: green;
  width: 264px;
  position: absolute;
  overflow: hidden;
  top: -200px;
  height: 200px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  z-index:-1;
}

    Don´t need to add z-index:9999; to .navUl li a