根据在另一个标签或之前隐藏的标签上处理的事件显示或隐藏UL

Question

我有这样的UL：

<ul id="nav" class="hide">
    <li>Apples</li>
    <li>Oranges</li>
    <li>Banana</li>
</ul>

我也有这样的锚标记：

<a id="show-ul" href="#">Show UL</a>

使用Vanilla JS（No JQuery）：

我需要在mouseover上显示UL并保持UL可见。如果鼠标移动到任何其他项目上，则仅隐藏UL：E.g：Body或在UL可见之后关闭。

最好是mouseout在UL上。

使用以下代码：一旦我鼠标移出或离开锚标签，就会隐藏UL。在UL上鼠标输出之前，如何让UL保持可见？

(function() {

  var showUl = document.getElementById('show-ul');
  var ul = document.getElementById('nav');

  showUl.addEventListener('mouseover', function(e) {
    ul.classList.remove('hide');
  }, false);

  // Example: Hide UL when Mouse out
  ul.addEventListener('mouseout', function(e) {
    ul.classList.add('hide');
  }, false);

})();

.hide { display:none }

<a id="show-ul" href="#">Show UL</a>

<ul id="nav" class="hide">
  <li>Apples</li>
  <li>Oranges</li>
  <li>Banana</li>
</ul>