如何让html中的下拉式导航栏部分仅在鼠标悬停时工作，而不是在单击时工作？

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li class="dropdown">
    <a href="#">Services</a>
    <div class="dropdown-content">
      <a href="#">Service 1</a>
      <a href="#">Service 2</a>
      <a href="#">Service 3</a>
    </div>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.dropdown-content {
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

var dropdowns = document.getElementsByClassName('dropdown');
for (var i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener('click', function(event) {
    event.preventDefault();
  });
}