dropdown in card

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<div class="status-card mdl-card mdl-cell mdl-shadow--2dp mdl-cell--3-col" id="status-card-1">                  
  <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing" style="margin-left: 4%;">                        
    <button id="test1" class="mdl-button mdl-js-button mdl-button--raised" style="margin-top: 8%"></button>
    <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events" for="test1">
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>xyz</span></li>
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>yue</span></li>
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>24</span></li>
    </ul>                       
    <div class="mdl-cell mdl-cell--6-col" style="display: flex; flex-flow: row wrap;">
       <h6 title="">TEST</h6>                            
    </div>                                     
  </div>
</div>
<div class="status-card mdl-card mdl-cell mdl-shadow--2dp mdl-cell--3-col">                  
  <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing" style="margin-left: 4%;">                        
    <button id="test2" class="mdl-button mdl-js-button mdl-button--raised" style="margin-top: 8%"></button>
    <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events" for="test2">
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>xyz</span></li>
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>yue</span></li>
      <li class="mdl-menu__item" style="color:...

CSS

.status-card {
    min-height: 15% !important;
    display: block !important;
    overflow:visible;
    z-index:10;
}

.status-card > .mdl-card__supporting-text {
    margin-bottom:0px !important;
    z-index:20;
}

.status-card > .mdl-card__supporting-text > .mdl-cell--10-col {
    padding: 8% 0 8% 2%;
}

.status-card span,
    color: black;
}

.status-card li:before,
    content: 'â– ';
    padding-right: 0.5em;
    font-size: 170%; /* or whatever */
}

.status-card ul{
    max-height: 140px;
    overflow-y: auto;
    z-index:100 !important;
}

#status-card-1{
  z-index:20;
}