Позиционирование меню Sub Nav под Main Nav

Question

Я использую CSS переход, чтобы сделать выпадающее меню. Сама анимация работает, однако у меня возникают проблемы с отображением суб-навигации поверх главной навигации.

Я попытался добавить высокий z-индекс в ссылку главного меню, но это не сработало:

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

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);
}

Так как я могу получить суб-навигацию, скользящую вниз под основной навигацией?

Вот ссылка для справки

Answer 1

Добавить z-index : -1 к 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;
}

Не нужно добавлять z-index:9999; к .navUl li a