I have materialize.min.css included already and everything else on the page is working. But when I try the dropdown nothing seems to happen. Any help would be appreciated. The dropdown I am trying to show is dropdown1. First li in nav-content. I tried as you can see to put the dropdown below origin but it did not help.
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<nav class="nav-extended">
<div class="nav-wrapper">
<a href="#" class="brand-logo">ASite</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
<li><a class="waves-effect waves-light btn">Register</a></li>
<li><a class="waves-effect waves-light btn">Login</a></li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab"><a class='dropdown-button' href='#' data-activates='dropdown1' data-beloworigin='true'>Drop Me!</a></li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab"><a href="#test3">Disabled Tab</a></li>
<li class="tab"><a href="#test4">Test 4</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
You must need to include .js file also before ending tag of body. Copy following tag and place it before end tag of body.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>