使用jQuery将CSS动画附加到多级导航栏

Question

我正在创建一个包含多个子元素的导航菜单。我遇到的问题是尝试无缝地附加CSS动画（使用animate.css库）。

第一个问题：当您将鼠标悬停在父<li>元素上时，它会向下滑动，但是如果您尝试将鼠标悬停在子导航上，它将消失。 （这是因为z索引为负，所以动画从后面进来了）-我可以删除z索引，但是slideInDown效果看起来会有所不同。 我想保持这种效果。

我听说悬停不适用于负的z-index，所以有没有解决我的问题的方法？

第二个问题：我不确定删除用户类.slideInDown并添加类.slideOutUp的最佳方法是什么？ <li>元素

请参见下面的代码：

$('.sy__list__primary > li').hover(function() {
  $(this).find('.sy__navigation__secondary').addClass('animated slideInDown');
});

.sy__navigation {
  position: relative;
}

.sy__navigation__primary {
  background: #333333;
}

.sy__navigation__secondary {
  position: absolute;
  background: #031f37eb;
  left: 0;
  top: 50px;
  z-index: -1;
  width: 100%;
  display: none;
}

.sy__list__primary>li:hover .sy__navigation__secondary {
  display: block;
}

ul.sy__list__secondary {
  justify-content: space-around;
  margin: auto;
  padding: 0;
  color: #ffffff;
}

ul.sy__list__primary {
  margin: auto;
  padding: 0;
  box-sizing: border-box;
}

ul.sy__list__primary span {
  color: #ffffff;
}

ul.sy__list__primary li {
  display: inline-block;
  letter-spacing: 1px;
  font-size: 10px;
  box-sizing: border-box;
  padding: 20px;
}

body .landing {
  height: 560px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

body .landing video {
  height: 560px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  object-fit: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="sy__navigation">
  <div class="sy__navigation__primary">
    <div class="container">
      <div class="row">
        <ul class="sy__list__primary">
          <li><span>TEST 1</span>
            <div class="sy__navigation__secondary">
              <ul class="sy__list__secondary active">
                <li>SUB 1A</li>
                <li>SUB 2A</li>
                <li>SUB 3A</li>
              </ul>
            </div>
          </li>
          <li><span>TEST 2</span>
            <div class="sy__navigation__secondary">
              <ul class="sy__list__secondary">
                <li>SUB 1B</li>
                <li>SUB 2B</li>
                <li>SUB 3B</li>
              </ul>
            </div>
          </li>
          <li><span>TEST 3</span>
            <div class="sy__navigation__secondary">
              <ul class="sy__list__secondary">
                <li>SUB 1C</li>
                <li>SUB 2C</li>
                <li>SUB 3B</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<section class="landing">
  <video autoplay="true" loop="true" muted="true" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></video>
</section>