Question

我有一张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>

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

http://jsfiddle.net/6sjLbrht/

Answer 1

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

.card {
    overflow: visible !important;
}

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

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

如何在Materialise中显示超出卡片边框的下拉菜单

1 个答案: