汉堡菜单折叠问题

Question

当我点击汉堡包菜单中的第三项 ("Opere") 时，它会正确折叠，但下一项 ("Contatti") 不会在项目下滚动。为什么？

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

您已为 li 指定高度，这会阻止子菜单在单击时展开。您可以将其更改为最小高度。

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

更改为：

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

汉堡菜单折叠问题

Hamburger menu collapsing issue

collapse

twitter-bootstrap

hamburger-menu