Drop down menu 如何在Materialize中使下拉菜单显示在卡的边界之外

我有一张Materialize卡，右上角有一个下拉菜单。但是，单击下拉按钮时，菜单会显示，但菜单内容不会超出卡的边框：

<ul id='myDropdown-menu' class='dropdown-content'>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
</ul>

<div class="card white">
  <div class="card-content grey-text text-darken-4">
    <span class="card-title grey-text text-darken-4">Card Title</span>
      <a id="myDropdown" class='btn-floating waves-effect waves-light transparent right' href='#' data-activates='myDropdown-menu'><i class="material-icons blue-grey-text text-darken-4">more_vert</i></a>
  </div>
</div>

卡片标题

如何使下拉菜单超出卡的边界

---

在

.card

类上似乎有一个

溢出：hidden

，它阻止菜单出现在卡的边框之外。通过在您自己的样式表中添加以下样式，您可以克服这一问题

.card {
    overflow: visible !important;
}

我已经更新了JSFIDLE来说明修复方法：