多个css下拉菜单出现在同一位置

<div class="dropdown-menu1">
  <!-- 下拉菜单1的内容 -->
</div>

<div class="dropdown-menu2">
  <!-- 下拉菜单2的内容 -->
</div>

.dropdown-menu1 {
  position: absolute;
  top: 50px;
  left: 0;
}

.dropdown-menu2 {
  position: absolute;
  top: 50px;
  left: 0;
}

<div class="dropdown-menu">
  <!-- 下拉菜单1的内容 -->
</div>

<div class="dropdown-menu">
  <!-- 下拉菜单2的内容 -->
</div>

.dropdown-menu:nth-child(1) {
  position: absolute;
  top: 50px;
  left: 0;
}

.dropdown-menu:nth-child(2) {
  position: absolute;
  top: 100px;
  left: 0;
}

<div class="dropdown-menu">
  <!-- 下拉菜单1的内容 -->
</div>

<div class="dropdown-menu">
  <!-- 下拉菜单2的内容 -->
</div>

var dropdownMenus = document.querySelectorAll('.dropdown-menu');
var topOffset = 50; // 下拉菜单的初始位置

dropdownMenus.forEach(function(menu, index) {
  var menuHeight = menu.offsetHeight;
  menu.style.top = topOffset + (index * menuHeight) + 'px';
});