如何定位下拉菜单，使其始终与其父菜单对齐(关于滚动)

<div class="parent-container">
  <button class="parent-menu">父菜单</button>
  <div class="dropdown-menu">
    <!-- 下拉菜单的内容 -->
  </div>
</div>

.parent-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%; /* 将下拉菜单相对于父菜单的下方显示 */
  left: 0;
  z-index: 999; /* 可选，控制下拉菜单的层级 */
  /* 其他样式设置 */
}

var parentContainer = document.querySelector('.parent-container');
var dropdownMenu = document.querySelector('.dropdown-menu');

window.addEventListener('scroll', function() {
  var parentRect = parentContainer.getBoundingClientRect(); // 获取父菜单的位置信息
  dropdownMenu.style.top = parentRect.bottom + 'px'; // 将下拉菜单的top值设置为父菜单的底部位置
});