如何在侧边菜单上添加延迟悬停？

<div class="sidebar">
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.sidebar {
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  height: 30px;
  line-height: 30px;
  padding: 5px;
}

.sidebar li:hover {
  background-color: #ccc;
}

var menuItems = document.querySelectorAll('.sidebar li');

menuItems.forEach(function(item) {
  var timeoutId;

  item.addEventListener('mouseenter', function() {
    timeoutId = setTimeout(function() {
      item.classList.add('hover');
    }, 500);
  });

  item.addEventListener('mouseleave', function() {
    clearTimeout(timeoutId);
    item.classList.remove('hover');
  });
});