MaterializeCSS Page Dropdown

THe dropdown doesnt seem to work with jquery 1 or jquery 3.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
  <div class="col s12">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>

        <!-- Dropdown Trigger -->
        <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>


        <!-- Dropdown Structure -->
        
      </div>
    </div>
  </div>
</div>
<!-- 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" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>

CSS

.card {
  overflow: visible !important;
};

JavaScript

$(document).ready(function() {
  console.log("intiate dropdown");
  
  $('.dropdown-button').dropdown({
    /* inDuration: 300,
    outDuration: 225, */
    constrain_width: false,
   /*  hover: false,
    gutter: 0,
    belowOrigin: false,
    alignment: 'right', */
    coverTrigger:false,
    
  });
});