There were several issues with your code example.
Multiple layouts
It appears that there was an extra layout in your code that shouldn't have been there. This may have been a mistake when copying and pasting the code.
Nested grids
When using nested grids, it is important to ensure that inner grids are both a mdl-cell and an mdl-grid, otherwise they won't function properly as grids. Make sure each element follows this structure.
<div class="mdl-grid">
<div class="mdl-cell mdl-grid mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
</div>
<div class="mdl-cell mdl-grid mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone"></div>
</div>
Menu button placement
The menu buttons were positioned outside of the cards within the grid, causing alignment issues. Placing them inside the cards where intended should resolve this problem.
Repeated IDs
Using the same ID for multiple menu buttons resulted in all menus triggering simultaneously upon click.
Missing classes in menu items
Some menu items were missing necessary classes for proper functionality.
I have addressed these issues and made corrections in this updated version on CodePen.