Hamburger menu collapsing issue

Question

When I click on the third item ("Opere") by hamburger menu, it's collapse correctly but the next item ("Contatti") doesn't scroll under items. Why?

http://www.simonenicosia.it/demo/

[]

<nav id="main-nav">
      <ul id="navbar-submenu">
        <li><a href="index.php">Home</a></li>
        <li><a href="#profilo">Profilo</a></li>
        <li><span data-toggle="collapse" data-target="#toggleOpere" data-parent="#navbar-submenu" class="collapsed">Opere</span>
          <div class="collapse" id="toggleOpere" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#"id="projects/pittura.html" class="project-expander">Pittura</a></li>
              <li><a href="#"id="projects/evoluzioni.html" class="project-expander">Evoluzioni pittoriche</a></li>
              <li><a href="#"id="projects/3d.html" class="project-expander">Forme tridimensionali</a></li>
              <li><a href="#"id="projects/steel.html" class="project-expander">Steel</a></li>
              <li><a href="#"id="projects/artdesign.html" class="project-expander">ArtDesign</a></li>
              <li><a href="#"id="projects/musticatower.html" class="project-expander">MusticaTower</a></li>
              <li><a href="#"id="projects/unstoppable.html" class="project-expander">Unstoppable spirit</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#contatti">Contatti</a></li>
      </ul>
      <a href="#" class="cd-close-menu">Chiudi<span></span></a>
    </nav>

Answer 1

You have specified height for li, which is preventing the sub menu to expand when clicked. You can change it to min-height.

#main-nav li {
    height: 15%;
}
#main-nav li {
    height: 20%;
}

change to:

#main-nav li {
    min-height: 15%;
}