title: Making an element overflow outside parent element
body: <p>I am using Material Design Lite to create cards.
  I added a menu to the card but the content of the menu only appears within the card.
  I want it to overflow like in this example (<a href="http://www.getmdl.io/components/index.html#menus-section" rel="nofollow">http://www.getmdl.io/components/index.html#menus-section</a>)</p>
  
  <p>My fiddle: <a href="http://jsfiddle.net/brizzz_/te5Lpw8m/" rel="nofollow">http://jsfiddle.net/brizzz_/te5Lpw8m/</a></p>
  
  <pre><code>&lt;div class="mdl-card__menu"&gt;
                  &lt;button id="more_reddit" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"&gt;
                    &lt;i class="material-icons"&gt;more_vert&lt;/i&gt;
                  &lt;/button&gt;
                   &lt;ul id="more-reddit-menu" class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                    for="more_reddit"&gt;
                  &lt;li class="mdl-menu__item"&gt;Some Action&lt;/li&gt;
                  &lt;li class="mdl-menu__item"&gt;Another Action&lt;/li&gt;
                  &lt;li class="mdl-menu__item"&gt;Disabled Action&lt;/li&gt;
                  &lt;li class="mdl-menu__item"&gt;Yet Another Action&lt;/li&gt;
                  &lt;li class="mdl-menu__item"&gt;Even Another Action&lt;/li&gt;
                &lt;/ul&gt;
           &lt;/div&gt;
  </code></pre>