drop-down-menu - 如何在 Materialise 中使下拉菜单显示在卡片边界之外

Question

我有一张 Materialise 卡，右上角有一个下拉菜单。但是，当单击下拉按钮时，菜单显示但菜单内容不会超出卡片的边界:

<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>

如何让下拉菜单超出卡片的边界？

http://jsfiddle.net/6sjLbrht/

Answer 1

好像有overflow: hidden在 .card阻止菜单出现在卡片边界之外的类。通过在您自己的样式表中添加以下样式，您可以克服这个问题

.card {
    overflow: visible !important;
}

我已经更新了 JSFiddle 来说明修复:

http://jsfiddle.net/6sjLbrht/1/