如何扩展按钮的悬停区域，使drop down仍被触发？

<button id="myButton">按钮</button>
<div id="myDropDown">下拉内容</div>

#myButton {
  padding: 10px;
}

#myDropDown {
  display: none;
}

var button = document.getElementById("myButton");
var dropDown = document.getElementById("myDropDown");
var isDropDownVisible = false;

button.addEventListener("mouseover", function() {
  dropDown.style.display = "block";
});

button.addEventListener("mouseout", function() {
  if (!isDropDownVisible) {
    dropDown.style.display = "none";
  }
});

dropDown.addEventListener("mouseover", function() {
  isDropDownVisible = true;
});

dropDown.addEventListener("mouseout", function() {
  isDropDownVisible = false;
  dropDown.style.display = "none";
});