title: materializecss navigation dropdown
body: <p>I try to use materializecss dropdown menu feature but out of four dropdown menu items, I am only seeing two of the items in the dropdown menu. Here is my HTML code</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav class="white blue-text"&gt;
    &lt;div class="navbar-wrapper container"&gt;
      &lt;!-- &lt;a class="brand-logo center waves-effect waves-light" href="javascript:void(0)"&gt;Abdul-Samii&lt;/a&gt; --&gt;
      &lt;a href="#" data-activates="mobile-menu" class="button-collapse indigo-text"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
      &lt;a href="#" class="brand-logo left"&gt;
        &lt;img src="images/logo.png" class="top-logo"&gt;
      &lt;/a&gt;
  
      &lt;ul class="hide-on-med-and-down right"&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)"&gt;Gallery&lt;/a&gt;
        &lt;/li&gt;
        &lt;ul id='dropdown1' class='dropdown-content'&gt;
          &lt;li&gt;&lt;a href="#!"&gt;Videos&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#!"&gt;Publication&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#!"&gt;Interviews&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#!"&gt;Pictures&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="javascript:void(0)"&gt;News&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light active"&gt;&lt;a href="events.html"&gt;Events&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="partners.html"&gt;Partners&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="javascript:void(0)"&gt;Contact Us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="side-nav" id="mobile-menu"&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="javascript:void(0)"&gt;Gallery&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="javascript:void(0)"&gt;News&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light active"&gt;&lt;a href="events.html"&gt;Events&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="partners.html"&gt;Partners&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="waves-effect waves-light"&gt;&lt;a href="javascript:void(0)"&gt;Contact Us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and the only thing I did to my nav in my css is this:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>nav ul a {
    font-size: 1.1rem;
    color: #2196F3;
  }
  nav,
  nav .nav-wrapper i,
  nav a.button-collapse,
  nav a.button-collapse i {
    height: 105px;
    line-height: 105px;
  }
  </code></pre>
  
  <p>check the navigation bar on this link: <a href="http://www.jalasem.com" rel="nofollow">http://www.jalasem.com</a>
  and click on gallery to understand what i am saying</p>