Hover button with javascript

I’m trying to make a hover-able button with javascript. It works but the onmouseout function hide the div to soon. Not sure what I’m doing wrong here.
I know you can use CSS to this but i would like to use 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;");
}
.dropA {
  display: block;
}

.cloths {
  display: none;
}
<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>