我想将滑动div放在主菜单栏的后面

Question

我希望我的超级菜单像这个网站https://www.storyblocks.com/stock-image。我已经使工作几乎像这样，但是我无法将div放在主菜单后面。如果我使用z-index，则会得到结果，但是当我将光标移离主链接时，它就会消失。

我尝试更改z-index，但我不知道我还能如何获得相同的结果。

* {
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-decoration: none;
  color: black;
}

.main-div ul {
  text-align: center;
  background: grey;
  position: relative;
}

.main-div ul li {
  display: inline-block;
}

.main-div ul li a {
  display: block;
  padding: 5px 10px 5px 10px;
}

.main-div ul li:hover a {
  color: white;
}

.sub-menu {
  background: white;
  width: 100%;
  height: 300px;
  left: 0;
  position: absolute;
  display: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: -1;
  /* z-index: -1;<<<this is where I am stuck and don't know what to do*/
}

.main-div ul li:hover .sub-menu {
  display: block;
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  from {
    margin-top: -300px;
  }
  to {
    margin-top: 0px;
  }
}

<nav class="main-nav">
    <div class="main-div">
        <ul>
            <li>
              <a href="#">T-Shirts</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Polos</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Bags</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Graphics</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Other Stuff</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
        </ul>
    </div>
</nav>