在div中的每个链接旁边添加一个下拉菜单

<div>
  <a href="#" class="link">Link 1</a>
  <a href="#" class="link">Link 2</a>
  <a href="#" class="link">Link 3</a>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

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

/* 可选样式：添加下拉箭头 */
.dropdown:before {
  content: '\25BE';
  display: inline-block;
  margin-right: 5px;
}

// 获取所有链接元素
const links = document.querySelectorAll('.link');

// 遍历链接元素并添加下拉菜单
links.forEach(link => {
  // 创建下拉菜单元素
  const dropdown = document.createElement('div');
  dropdown.classList.add('dropdown');

  // 创建下拉菜单内容元素
  const dropdownContent = document.createElement('div');
  dropdownContent.classList.add('dropdown-content');

  // 添加下拉菜单内容
  dropdownContent.innerHTML = `
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  `;

  // 将下拉菜单内容添加到下拉菜单元素中
  dropdown.appendChild(dropdownContent);

  // 将下拉菜单插入链接后面
  link.insertAdjacentElement('afterend', dropdown);
});