如何在下拉图标下定位菜单列表？

<div class="dropdown">
  <button class="dropdown-toggle">下拉图标</button>
  <div class="dropdown-menu">
    <ul>
      <li>菜单项1</li>
      <li>菜单项2</li>
      <li>菜单项3</li>
    </ul>
  </div>
</div>

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

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

<div class="dropdown">
  <button class="dropdown-toggle">下拉图标</button>
  <ul class="dropdown-menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: relative;
  margin-top: 10px;
  display: none;
}

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

<div class="dropdown">
  <button class="dropdown-toggle" onclick="toggleDropdown()">下拉图标</button>
  <ul class="dropdown-menu" id="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.dropdown-menu {
  display: none;
}

.show {
  display: block;
}

function toggleDropdown() {
  var menu = document.getElementById("menu");
  menu.classList.toggle("show");
}