有没有办法让dropdow元素在项目集合的另一个元素上显示

<div class="dropdown">
  <button class="dropdown-button">点击显示下拉菜单</button>
  <ul class="dropdown-menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>
<div class="target-element">
  这里是目标元素
</div>

.dropdown-menu {
  display: none;
}

.target-element {
  border: 1px solid black;
  padding: 10px;
}

var dropdownButton = document.querySelector('.dropdown-button');
var dropdownMenu = document.querySelector('.dropdown-menu');

dropdownButton.addEventListener('click', function() {
  if (dropdownMenu.style.display === 'none') {
    dropdownMenu.style.display = 'block';
  } else {
    dropdownMenu.style.display = 'none';
  }
});

var dropdownItems = document.querySelectorAll('.dropdown-menu li');
var targetElement = document.querySelector('.target-element');

dropdownItems.forEach(function(item) {
  item.addEventListener('click', function() {
    targetElement.textContent = item.textContent;
    dropdownMenu.style.display = 'none';
  });
});