如何延迟下拉菜单触发器的淡出？

<button id="trigger">下拉菜单</button>
<ul id="menu">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

#menu {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.hidden {
  opacity: 0;
}

var trigger = document.getElementById('trigger');
var menu = document.getElementById('menu');

trigger.addEventListener('click', function() {
  // 显示菜单
  menu.classList.remove('hidden');
  
  // 延迟0.5秒后触发淡出效果
  setTimeout(function() {
    menu.classList.add('hidden');
  }, 500);
});