如何在鼠标离开触发器元素时使下拉内容保持打开状态

<div class="dropdown">
  <button class="trigger">下拉菜单</button>
  <div class="dropdown-content">
    <!-- 下拉内容 -->
  </div>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.trigger {
  background-color: #ccc;
  border: none;
  color: #000;
  padding: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  padding: 10px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

const trigger = document.querySelector('.trigger');
const dropdownContent = document.querySelector('.dropdown-content');

trigger.addEventListener('mouseleave', function() {
  dropdownContent.style.display = 'block';
});