如何在 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

.card class 上似乎有一个 overflow: hidden 阻止菜单出现在卡片边框之外。通过在您自己的样式表中添加以下样式，您可以解决这个问题

.card {
    overflow: visible !important;
}

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

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

如何在 Materialise 中使下拉菜单显示在卡片的边界之外

How to make a dropdown menu show beyond the borders of a card in Materialize

materialize

drop-down-menu