折叠导航-当悬停/单击时，如何使下拉菜单出现在‘服务’导航链接下？

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">服务</a>
    <div class="dropdown-menu">
      <!-- 下拉菜单内容 -->
    </div>
  </li>
  <li><a href="#">联系我们</a></li>
</ul>

.dropdown-menu {
  display: none; /* 默认隐藏下拉菜单 */
  position: absolute;
  top: 100%; /* 下拉菜单出现在“服务”导航链接下方 */
  left: 0;
}

li:hover .dropdown-menu,
li:focus-within .dropdown-menu {
  display: block; /* 悬停或获取焦点时显示下拉菜单 */
}

// 获取所有包含下拉菜单的导航链接
const dropdownLinks = document.querySelectorAll('.nav li');

// 为每个导航链接添加点击事件监听器
dropdownLinks.forEach(link => {
  link.addEventListener('click', function() {
    // 切换下拉菜单的显示状态
    this.querySelector('.dropdown-menu').classList.toggle('show');
  });
});