Show/hide menu sublist in a navigation bar with bootstrap

Question

I have a question on Bootstrap. I have this code:

<ul>
    <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Home</span></a></li>
    <li><a href="#portfolio" id="portfolio-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Photogallery</span></a></li>
    <li><a href="#about" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-user">Chi sono</span></a></li>
    <li><a href="#curriculum" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-linkedin-square">Curriculum</span></a>
    <ul>
        <li><a href="#formazione" id="top-link" class="skel-layers-ignoreHref">Formazione</a></li>
        <li><a href="#stage" id="top-link" class="skel-layers-ignoreHref">Stage</a></li>
        <li><a href="#insegnante" id="top-link" class="skel-layers-ignoreHref">Insegnante Hip Hop</a></li>
        <li><a href="#danzatore" id="top-link" class="skel-layers-ignoreHref">Danzatore</a></li>
        <li><a href="#coreografie" id="top-link" class="skel-layers-ignoreHref">Coreografie</a></li>
    </ul></li>
    <li><a href="#contact" id="contact-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">Contatti</span></a></li>
</ul>

I would that the central <ul> element was a sub menu of the #curriculum <li> element. In other words I would that the sub menu was shown only when the #curriculum element was expanded. How can I do this? In this moment the navigation menu is this:

 <ul> <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Home</span></a></li> <li><a href="#portfolio" id="portfolio-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Photogallery</span></a></li> <li><a href="#about" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-user">Chi sono</span></a></li> <li><a href="#curriculum" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-linkedin-square">Curriculum</span></a> <ul> <li><a href="#formazione" id="top-link" class="skel-layers-ignoreHref">Formazione</a></li> <li><a href="#stage" id="top-link" class="skel-layers-ignoreHref">Stage</a></li> <li><a href="#insegnante" id="top-link" class="skel-layers-ignoreHref">Insegnante Hip Hop</a></li> <li><a href="#danzatore" id="top-link" class="skel-layers-ignoreHref">Danzatore</a></li> <li><a href="#coreografie" id="top-link" class="skel-layers-ignoreHref">Coreografie</a></li> </ul></li> <li><a href="#contact" id="contact-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">Contatti</span></a></li> </ul> 

Answer 1

You could put the list items you want in the sub menu inside a bootstrap dropdown like this:

Example http://www.bootply.com/IspYezDkvo

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Curriculum <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#formazione" id="top-link" class="skel-layers-ignoreHref">Formazione</a></li>
    <li><a href="#stage" id="top-link" class="skel-layers-ignoreHref">Stage</a></li>
    <li><a href="#insegnante" id="top-link" class="skel-layers-ignoreHref">Insegnante Hip Hop</a></li>
    <li><a href="#danzatore" id="top-link" class="skel-layers-ignoreHref">Danzatore</a></li>
    <li><a href="#coreografie" id="top-link" class="skel-layers-ignoreHref">Coreografie</a></li>
  </ul>
</li>