jQuery selector not working properly with drop up menu
<p>I made an drop up menu but it is not working properly. See fiddle or the code: <a href="https://jsfiddle.net/9u6fc7wp/" rel="nofollow">https://jsfiddle.net/9u6fc7wp/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $(function() {
    $(".links&gt;li&gt;a:not(.sub-menu a)").mouseenter(function() {
      $(".sub-menu-bg").addClass("menu-bg-up");

      setTimeout(function() {
        $(".sub-menu").fadeIn();
      }, 700);
    });
    $(".sub-menu-bg").mouseleave(function() {
      $(".sub-menu").fadeOut();
      setTimeout(function() {
        $(".sub-menu-bg").removeClass("menu-bg-up");
      }, 500);
    });
  }());
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
  height: 300px;
}
footer {
  background: white;
  color: #8a8a8a;
  font-family: TWcenMTregular;
  font-size: 1em;
  text-transform: uppercase;
  padding: 1vh 0;
  position: relative;
  z-index: 9100;
  width: 100%;
}
footer .links {
  text-align: center;
  list-style: none;
}
footer .links&gt;li {
  float: left;
  width: 24%;
  position: relative;
}
footer .links li::after {
  content: ' | ';
  float: right;
}
footer .links li:last-child::after {
  content: '';
}
footer .links li a {
  color: #8a8a8a;
}
footer .links li:hover &gt; a {
  color: #9ebe2d;
}
footer .links li:hover .sub-menu li:first-child a {
  color: #9ebe2d;
}
footer .sub-menu {
  position: absolute;
  bottom: 100%;
  left: initial;
  padding: 0px 0;
  margin: 0!important;
  font-family: TWcenMTregular;
  font-size: 1em;
  width: 100%;
  height: 150px;
  display: none;
}
footer .sub-menu li {
  text-align: center;
}
footer .sub-menu li:first-child {
  font-family: prismRegular;
  padding: 0 0 10px 0;
}
footer .sub-menu li::after {
  content: '';
  margin: 0;
}
footer .sub-menu li a {
  color: #8a8a8a;
}
footer .sub-menu li a:hover {
  color: #9ebe2d;
}
footer .sub-menu-bg {
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  bottom: 100%;
  left: initial;
  z-index: -5;
  width: 100%;
  display: block;
  transition: 0.7s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  -ms-transition: 0.7s;
  height: 0;
}
.menu-bg-up {
  height: 165px !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;footer&gt;
  &lt;ul class="links"&gt;
    &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link3&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link4&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link2&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link3&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link4&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link3&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link4&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="sub-menu-bg"&gt;&lt;/div&gt;
&lt;/footer&gt;</code></pre>
</div>
</div>
</p>

<p>If you move the mouse slowly, it works fine. I used timeout function which makes the sub menu links appear later. If you move the cursor to one of the links and immediately move to the empty place where the links will appear. When the cursor makes contact with the links, the drop up menu dissapears.. It must only disappear when the cursor leaves the footer. To me it seems that the selectors are not working properly while that should fix the problem. I only want mouseenter on the first a children of the <code>.links&gt;li</code></p>

<p>If this can be done with only CSS please show me how. I have done all i could. I hope I clearly explained the problem and feel free to ask questions.</p>

<p>Thanks in advance.</p>