如何用基本的javascript代码做流畅的打开下拉菜单？

<div class="dropdown">
  <button onclick="toggleDropdown()">点击打开菜单</button>
  <ul id="dropdownMenu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

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

#dropdownMenu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

#dropdownMenu li {
  list-style-type: none;
  cursor: pointer;
}

#dropdownMenu li:hover {
  background-color: #ddd;
}

function toggleDropdown() {
  var dropdownMenu = document.getElementById("dropdownMenu");
  if (dropdownMenu.style.display === "none") {
    dropdownMenu.style.display = "block";
  } else {
    dropdownMenu.style.display = "none";
  }
}