如何让导航栏下拉选项在没有JQuery的情况下工作

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

// 获取导航栏中的下拉选项
var dropdowns = document.getElementsByClassName('dropdown');

// 遍历下拉选项，为每个下拉选项添加事件监听器
for (var i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener('click', function() {
    // 切换下拉选项的显示和隐藏
    this.classList.toggle('active');
    
    // 获取当前下拉选项的下拉菜单
    var dropdownMenu = this.getElementsByClassName('dropdown-menu')[0];
    
    // 切换下拉菜单的显示和隐藏
    dropdownMenu.classList.toggle('show');
  });
}

// 点击页面其他地方时，隐藏所有下拉选项
window.addEventListener('click', function(event) {
  if (!event.target.matches('.dropdown')) {
    var dropdowns = document.getElementsByClassName('dropdown');
    for (var i = 0; i < dropdowns.length; i++) {
      var dropdownMenu = dropdowns[i].getElementsByClassName('dropdown-menu')[0];
      if (dropdownMenu.classList.contains('show')) {
        dropdowns[i].classList.remove('active');
        dropdownMenu.classList.remove('show');
      }
    }
  }
});

.dropdown-menu {
  display: none;
}

.dropdown.active .dropdown-menu {
  display: block;
}