javascript – Materialise下拉列表不起作用

我正在尝试使用Materialize在侧边栏中创建一个下拉菜单,但它不起作用.
下拉列表的宽度与触发器的宽度不同,并且填充将锚点移动到列表项的底部. (代码与docs网站相同)

这是Codepen的问题：example

谢谢您的帮助 ：)

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

$('.dropdown-button').dropdown({
           inDuration: 300,consTrain_width: true,hover: false,gutter: 0,belowOrigin: false 
           }
      );

$('.dropdown-button').dropdown();