如何使下拉菜单显示在实体化卡片的边界之外

Question

我在右上角有一个带有下拉菜单的实体化卡片。但是，单击下拉按钮，菜单显示，但菜单内容不超出卡的边界时：

<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类，这是防止菜单出现卡的边界之外的overflow: hidden。通过在自己的样式表中添加下面的样式，你可以克服这是

.card { 
    overflow: visible !important; 
} 

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

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