title: Materialize drop downs won't drop on hover
body: <p>For whatever reason, my Materialize drop down menus won't drop on hover (they should be default). </p>
  
  <pre><code>&lt;ul id="dropdown2" class="dropdown-content"&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance" id="camp-dates"&gt;CAMP DATES&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance" id="prices"&gt;CAMP PRICES&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="dropdown1" class="dropdown-content"&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance"  id="finance-webhooks"&gt;STRIPE FORMS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance"  id="update-forms"&gt;UPDATE FORMS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="dropdown4" class="dropdown-content"&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance" id="camp-dates"&gt;CAMP DATES&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance" id="prices"&gt;CAMP PRICES&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="dropdown3" class="dropdown-content"&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance"  id="finance-webhooks"&gt;STRIPE FORMS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="hover-nav-finance"  id="update-forms"&gt;UPDATE FORMS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;nav&gt;
      &lt;div class="nav-wrapper"&gt;
          &lt;a href="#" class="brand-logo"&gt;&amp;nbsp; ACCOUNTING&lt;/a&gt;
          &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
          &lt;ul id="nav-mobile" class="right hide-on-med-and-down hlight"&gt;
              &lt;li&gt;&lt;a href="#" class="bold-only" id="pay-by-check"&gt;CHECK PAYMENT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-button bold-only" href="#" data-activates="dropdown2"&gt;SETTINGS&lt;i class="material-icons right"&gt;arrow_drop_down&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-button bold-only" href="#" data-activates="dropdown1"&gt;WEBHOOKS&lt;i class="material-icons right"&gt;arrow_drop_down&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="bold-only" id="tuition-reports"&gt;REPORTS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="bold-only" id="finance-charts"&gt;CHARTS&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="side-nav" id="mobile-demo"&gt;
              &lt;li&gt;&lt;a href="#" id="pay-by-check"&gt;CHECK PAYMENT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-button" href="#" data-activates="dropdown4"&gt;SETTINGS&lt;i class="material-icons right"&gt;arrow_drop_down&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-button" href="#" data-activates="dropdown3"&gt;WEBHOOKS&lt;i class="material-icons right"&gt;arrow_drop_down&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="tuition-reports"&gt;REPORTS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="finance-charts"&gt;CHARTS&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I've got the dropdown initialized (I'm in Meteor so initializing would be inside an onRendered Template):</p>
  
  <pre><code>Template.myTemplate.onRendered(function() {
    $(".dropdown-button").dropdown();
  }
  </code></pre>
  
  <p>So my thought was to see if I could force it with some CSS (one of my weaknesses):</p>
  
  <pre><code>.nav-wrapper ul.hlight li:hover #dropdown2 {
    display: block;
  }
  </code></pre>
  
  <p>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</p>