How to set dropdown overlap other elements in materialize

I'm trying to set a dropdown to overlap other elements in materialize.

The problem I'm having is with the last collection item and its dropdown.

When you open the dropdown, it is placed underneath the other elements.

How can I have it overlap instead?

Here is demo jsfiddle:

<ul class="collection">
<li class="collection-item avatar">
  <img src="images/yuna.jpg" alt="" class="circle">
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
  <i class="material-icons circle">folder</i>
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
  <i class="material-icons circle green">insert_chart</i>
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
  <i class="material-icons circle red">play_arrow</i>
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
       <!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>

Solution

The class .collection has overflow: hidden; if you set overflow: visible; to the ul you will see the dropdown. Here is the jsfiddle working https://jsfiddle.net/hgyj9r88/2/