2015-07-10 54 views
3

我在右上角有一個帶有下拉菜單的實體化卡片。但是,單擊下拉按鈕,菜單顯示,但菜單內容不超出卡的邊界時:如何使下拉菜單顯示在實體化卡片的邊界之外

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

回答

4

人們似乎對.card類,這是防止菜單出現卡的邊界之外的overflow: hidden。通過在自己的樣式表中添加下面的樣式,你可以克服這是

.card { 
    overflow: visible !important; 
} 

我已經更新了的jsfiddle來說明修復:

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

+1

謝謝盧克,就像一個魅力! – Joseworks