将下拉菜单的主页从悬停状态转换为onclick状态

<div class="dropdown">
  <button onclick="toggleDropdown()">下拉菜单</button>
  <ul id="dropdownMenu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

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

.dropdown ul {
  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;
}

.dropdown ul li {
  list-style-type: none;
}

.dropdown ul li a {
  text-decoration: none;
  color: #333;
}

.dropdown.open ul {
  display: block;
}

function toggleDropdown() {
  var dropdownMenu = document.getElementById("dropdownMenu");
  dropdownMenu.classList.toggle("open");
}