使用JavaScript实现悬停按钮时onmouseout触发过早的问题求助

我正在尝试用JavaScript做一个可悬停的按钮，功能虽然能跑，但onmouseout函数会过早把下拉的div给隐藏掉，完全搞不懂哪里出问题了。

我知道用CSS也能实现这个效果，但我就是想搞明白怎么用JavaScript来做这件事。

下面是我的代码：

JavaScript 代码 #

function show() {
  let div = document.getElementById("cloth");
  div.setAttribute("style", "display:block; border:1px solid black;");
}

function hide() {
  let div = document.getElementById("cloth");
  div.setAttribute("style", "display:none;");
}

CSS 代码 #

.dropA {
  display: block;
}

.cloths {
  display: none;
}

HTML 代码 #

<div>
  <button id="menu" class="dropA"  onmouseover="show()">
    Menu
  </button>
  <div id="cloth"   class="cloths" onmouseout="hide()">
    <p>Dresses</p>
    <p>Shirts</p>
    <p>Pants</p>
  </div>
</div>

备注：内容来源于stack exchange，提问作者Smiley_Guy