Javascript – Materialize dropdown doesn’t work

cssdrop-down-menuhtmljavascriptmaterialize

I'm trying to make a dropdown menu inside a sidebar with Materialize, but it doesn't work.
the width of the dropdown isn't the same as the trigger and the padding move the anchor to the bottom of the list item. (The code is the same as the docs website)

Here is a Codepen with the issue: example

Thanks for the help 🙂

$(document).ready(function(){
      
      // Sidebar
      $(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'left'});
      // Dropdown
      $('.dropdown-button').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: false, // Does not change width of dropdown to that of the activator
           hover: false, // Activate on hover
           gutter: 0, // Spacing from edge
           belowOrigin: false // Displays dropdown below the button
           }
      );
    });
<div id="slide-out" class="side-nav full">
  <ul>
      <li><a href="#">First Link</span></a></li>
      <li><a href="#">Second Link</span></a></li>
      <!-- Dropdown Trigger -->
      <li><a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a></li>
  </ul>
</div>

<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>

<div class="row">
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu medium black-text left"></i></a>
</div>

Best Solution

For anyone having similar issue: I've got a similar problem because I was using jQuery 3.x beta. Switched to 2.2.2 and now it's fine. Seems like some changes in animations mechanisms.

Hope this helps somebody.