html - 使元素溢出到父元素之外

Question

我正在使用 Material Design Lite 来创建卡片。我在卡片中添加了一个菜单，但菜单的内容只出现在卡片中。我希望它像本例中那样溢出 (http://www.getmdl.io/components/index.html#menus-section)

我的 fiddle :http://jsfiddle.net/brizzz_/te5Lpw8m/

<div class="mdl-card__menu">
                <button id="more_reddit" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                  <i class="material-icons">more_vert</i>
                </button>
                 <ul id="more-reddit-menu" class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                  for="more_reddit">
                <li class="mdl-menu__item">Some Action</li>
                <li class="mdl-menu__item">Another Action</li>
                <li class="mdl-menu__item">Disabled Action</li>
                <li class="mdl-menu__item">Yet Another Action</li>
                <li class="mdl-menu__item">Even Another Action</li>
              </ul>
         </div>

Answer 1

您的 .mdl-card CSS 规则设置了 overflow: hidden;。

我不确定这是否是故意的，但删除它会实现您正在寻找的东西。如果您必须在该元素上使用 overflow: hidden;，则需要设计另一种解决方案。就像将菜单放在该容器之外并绝对定位一样。