如何将下拉菜单添加到卡片底部

<div class="card">
  <h2>Card Title</h2>
  <p>Card content goes here.</p>
  <button class="dropdown-trigger">Show Menu</button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.dropdown-trigger {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  list-style: none;
}

.dropdown-menu li {
  margin-bottom: 5px;
}

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

.dropdown-menu li a:hover {
  text-decoration: underline;
}

$(document).ready(function() {
  $('.dropdown-trigger').click(function() {
    $('.dropdown-menu').toggle();
  });
});