如何将下拉按钮与导航按钮垂直对齐

<nav>
  <ul class="nav-menu">
    <li><a href="#">按钮1</a></li>
    <li><a href="#">按钮2</a></li>
    <li class="dropdown">
      <div class="dropdown-btn">下拉按钮</div>
      <ul class="dropdown-menu">
        <li><a href="#">下拉选项1</a></li>
        <li><a href="#">下拉选项2</a></li>
        <li><a href="#">下拉选项3</a></li>
      </ul>
    </li>
    <li><a href="#">按钮3</a></li>
  </ul>
</nav>

.nav-menu {
  display: flex;
  align-items: center; /* 垂直对齐 */
  list-style: none;
  padding: 0;
}

.nav-menu li {
  margin-right: 10px;
}

.dropdown {
  position: relative;
}

.dropdown-btn {
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* 下拉菜单相对于下拉按钮的位置 */
  left: 0;
}

.dropdown:hover .dropdown-menu {
  display: block; /* 鼠标悬停时显示下拉菜单 */
}