How to undo function when mouse is moved

by kairavthakar2016

HTML

<div class="dropdown">
      <button onmouseover="myFunction()" class="dropbtn">Genre</button>
      <div id="myDropdown" class="dropdown-content">
        <input type='button' id='btn' value='Movies'/>
        <input type='button' id='btn' value='Classic'/>
        <input type='button' id='btn' value='Rennaisance'/>
      </div>
    </div>
    <div class="dropdown">
      <button onmouseover="myFunction1()" class="dropbtn">Composer</button>
      <div id="myDropdown1" class="dropdown-content">
        <input type='button' id='btn' value='Michael Kamen'/>
        <input type='button' id='btn' value='nog'/>
        <input type='button' id='btn' value='Rennaisance'/>
      </div>
    </div>

CSS

.dropdown-content{display: none;}

JavaScript

function myFunction() {
  document.getElementById('myDropdown').classList.toggle('show');
}
function myFunction1() {
  document.getElementById('myDropdown1').classList.toggle('show');
}