如何防止颤动下拉菜单隐藏其父对话框？

<div class="dialog">
  <button class="dropdown-btn">下拉菜单</button>
  <ul class="dropdown-menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.dialog {
  position: relative;
}

.dropdown-menu {
  position: fixed;
  z-index: 999;
  display: none;
  transition: opacity 0.3s ease-in-out;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-btn:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

.dropdown-menu li {
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f1f1f1;
}

const dropdownBtn = document.querySelector('.dropdown-btn');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownBtn.addEventListener('click', function(event) {
  event.stopPropagation();
  dropdownMenu.classList.toggle('show');
});

document.addEventListener('click', function() {
  dropdownMenu.classList.remove('show');
});