Incorporating the materializecss dropdown menu feature, I encountered an issue where only two out of four dropdown menu items were visible. Here is the HTML code snippet in question:
<nav class="white blue-text">
<div class="navbar-wrapper container">
<a href="#" data-activates="mobile-menu" class="button-collapse indigo-text"><i class="material-icons">menu</i></a>
<a href="#" class="brand-logo left">
<img src="images/logo.png" class="top-logo">
</a>
<ul class="hide-on-med-and-down right">
<li class="waves-effect waves-light"><a href="index.html">Home</a>
</li>
<li class="waves-effect waves-light"><a href="about.html">About Us</a>
</li>
<li class="waves-effect waves-light"><a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)">Gallery</a>
</li>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">Videos</a>
</li>
<li><a href="#!">Publication</a>
</li>
<li><a href="#!">Interviews</a>
</li>
<li><a href="#!">Pictures</a>
</li>
</ul>
<li class="waves-effect waves-light"><a href="javascript:void(0)">News</a>
</li>
<li class="waves-effect waves-light active"><a href="events.html">Events</a>
</li>
<li class="waves-effect waves-light"><a href="partners.html">Partners</a>
</li>
<li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a>
</li>
</ul>
<ul class="side-nav" id="mobile-menu">
<li class="waves-effect waves-light"><a href="index.html">Home</a>
</li>
<li class="waves-effect waves-light"><a href="about.html">About Us</a>
</li>
<li class="waves-effect waves-light"><a href="javascript:void(0)">Gallery</a>
</li>
<li class="waves-effect waves-light"><a href="javascript:void(0)">News</a>
</li>
<li class="waves-effect waves-light active"><a href="events.html">Events</a>
</li>
<li class="waves-effect waves-light"><a href="partners.html">Partners</a>
</li>
<li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a>
</li>
</ul>
</div>
</nav>
My only modification to the nav in my CSS was as follows:
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;
}
To see the issue for yourself, you can check the navigation bar on this site: Clicking on the Gallery option will showcase the problem mentioned above.