Question

我正在使用Material Design Lite创建卡片。我在卡片上添加了一个菜单，但菜单内容只出现在卡片中。我希望它像这个例子（http://www.getmdl.io/components/index.html#menus-section）

一样溢出

我的小提琴：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;，那么您需要设计另一个解决方案。就像将菜单放在容器外面并绝对定位一样。

Answer 2

您是否在样式表中添加了溢出？

使元素在父元素之外溢出

2 个答案: