Materialize drop downs won't drop on hover - meteor

Question

For whatever reason, my Materialize drop down menus won't drop on hover (they should be default).
<ul id="dropdown2" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<ul id="dropdown4" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown3" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<nav>
<div class="nav-wrapper">
ACCOUNTING
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down hlight">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown2">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown1">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button" href="#" data-activates="dropdown4">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdown3">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
</div>
</nav>
I've got the dropdown initialized (I'm in Meteor so initializing would be inside an onRendered Template):
Template.myTemplate.onRendered(function() {
$(".dropdown-button").dropdown();
}
So my thought was to see if I could force it with some CSS (one of my weaknesses):
.nav-wrapper ul.hlight li:hover #dropdown2 {
display: block;
}
Arg. This is wrong. Can I force this in CSS if the default isn't working? Right now my version of Meteor is using jQuery 1.11

Answer 1

Classic approach do not work with Materialize CSS because it has its own JavaScript methods.
Define dropdown-button & dropdown-content in your template like:
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
Then on client-side JavaScript initiate it like:
Template.myTemplate.onRendered(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
}
Now on hover, it will drop because you defined: hover: true, // Activate on hover
I think you missed dropdown-button part.
For more information: http://materializecss.com/dropdown.html