如何让我的下拉菜单显示在一个盒子里？

Question

我正在制作一个带下拉菜单的菜单，我希望将其显示为一个方框，但是当我使用display: flex时，它会显示一个很长的列表。

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: flex;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 10</a>
    <a href="#">Link 21</a>
    <a href="#">Link 32</a>
    <a href="#">Link 13</a>
    <a href="#">Link 24</a>
    <a href="#">Link 35</a>
    <a href="#">Link 16</a>
    <a href="#">Link 27</a>
    <a href="#">Link 38</a>
    <a href="#">Link 19</a>
    <a href="#">Link 20</a>
    <a href="#">Link 39</a>
    <a href="#">Link 18</a>
    <a href="#">Link 27</a>
    <a href="#">Link 36</a>
  </div>
</div>

菜单列表应如下所示：

如何使图像看起来像？

Answer 1

已编辑至ul li而不是button（基于评论）。

您可以执行以下操作（CSS中记录了修改）：

＆＃13;

＆＃13;

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  /* new */
  list-style: none;
  width: 80px;
  text-align: center;
}

.dropdown {
  position: relative;
  display: inline-block;
  /* new */
  width: 100%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* new */
  top: 68px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: flex;
  /* new */
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}


/* bullets */

a::before {
  content: "○ ";
}

＆＃13;

<div class="dropdown">
  <ul class="dropbtn">
    <li>Dropdown</li>
  </ul>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 10</a>
    <a href="#">Link 21</a>
    <a href="#">Link 32</a>
    <a href="#">Link 13</a>
    <a href="#">Link 24</a>
    <a href="#">Link 35</a>
    <a href="#">Link 16</a>
    <a href="#">Link 27</a>
    <a href="#">Link 38</a>
    <a href="#">Link 19</a>
    <a href="#">Link 20</a>
    <a href="#">Link 39</a>
    <a href="#">Link 18</a>
    <a href="#">Link 27</a>
    <a href="#">Link 36</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;