<div class="demo-preview-block"> <style> .container-menu-lower-left { position: relative; width: 200px; } .background-menu-lower-left { background: white; height: 148px; width: 100%; } .bar-menu-lower-left { box-sizing: border-box; background: #3F51B5; color: white; width: 100%; padding: 16px; } </style> <div class="container-menu-lower-left mdl-shadow--2dp"> <div class="bar-menu-lower-left"> <button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-lower-left"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul> </div> <div class="background-menu-lower-left"></div> </div> <style> .container-menu-lower-right { position: relative; width: 200px; } .background-menu-lower-right { background: white; height: 148px; width: 100%; } .bar-menu-lower-right { box-sizing: border-box; position: relative; background: #3F51B5; color: white; height: 64px; width: 100%; padding: 16px; } .wrapper-menu-lower-right { box-sizing: border-box; position: absolute; right: 16px; } </style> <div class="container-menu-lower-right mdl-shadow--2dp"> <div class="bar-menu-lower-right"> <div class="wrapper-menu-lower-right"> <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-lower-right"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul> </div> </div> <div class="background-menu-lower-right"></div> </div> <style> .container-menu-top-left { position: relative; width: 200px; } .background-menu-top-left { background: white; height: 148px; width: 100%; } .bar-menu-top-left { box-sizing: border-box; background: #3F51B5; color: white; width: 100%; padding: 16px; } </style> <div class="container-menu-top-left mdl-shadow--2dp"> <div class="background-menu-top-left"></div> <div class="bar-menu-top-left"> <button id="demo-menu-top-left" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-top-left"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul> </div> </div> <style> .container-menu-top-right { position: relative; width: 200px; } .background-menu-top-right { background: white; height: 148px; width: 100%; } .bar-menu-top-right { box-sizing: border-box; position: relative; background: #3F51B5; color: white; height: 64px; width: 100%; padding: 16px; } .wrapper-menu-top-right { box-sizing: border-box; position: absolute; right: 16px; } </style> <div class="container-menu-top-right mdl-shadow--2dp"> <div class="background-menu-top-right"></div> <div class="bar-menu-top-right"> <div class="wrapper-menu-top-right"> <button id="demo-menu-top-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-top-right"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul> </div> </div> </div> <div id="message"></div> </div>