切换html/css网站菜单中的菜单问题。将光标悬停在右侧的汉堡图标上时无法获取菜单

<!-- HTML -->
<div class="navbar">
  <div class="hamburger" id="hamburger">☰</div>
  <div class="menu" id="menu">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

<!-- CSS -->
.navbar .hamburger:hover + .menu {
  display: block;
}
.menu {
  display: none;
}

<!-- HTML -->
<div class="navbar">
  <div class="hamburger" id="hamburger">☰</div>
  <div class="menu" id="menu">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

<!-- JavaScript -->
<script>
  document.getElementById('hamburger').addEventListener('mouseenter', function() {
    document.getElementById('menu').style.display = 'block';
  });

  document.getElementById('hamburger').addEventListener('mouseleave', function() {
    document.getElementById('menu').style.display = 'none';
  });
</script>

.menu {
  display: none;
  position: absolute;
  z-index: 1000;
}