如何将带有列表的<nav>转换为下拉菜单

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}

const navList = document.querySelector('nav ul');
const dropdownMenu = document.createElement('select');

// 创建下拉菜单选项
navList.querySelectorAll('li').forEach((li) => {
  const option = document.createElement('option');
  option.value = li.querySelector('a').getAttribute('href');
  option.text = li.querySelector('a').innerText;
  dropdownMenu.appendChild(option);
});

// 监听窗口大小变化事件
window.addEventListener('resize', () => {
  if (window.innerWidth < 768) {
    // 将列表替换为下拉菜单
    navList.style.display = 'none';
    document.querySelector('nav').appendChild(dropdownMenu);
  } else {
    // 将下拉菜单替换为列表
    navList.style.display = 'flex';
    dropdownMenu.remove();
  }
});