使CSS下拉菜单显示在div上

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

.container {
  position: relative;
}

.dropdown-button {
  background-color: #f1f1f1;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  display: none;
  z-index: 999;
}

.dropdown-menu li {
  padding: 5px;
}

.dropdown-button:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}