Buonasera a tutti, come potrei aggiungere un sub-menu a questo codice?


HTML
codice:
<section class="top-bar-section">
    <ul class="right">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="chi-siamo.html">Chi Siamo</a></li>
      <li><a href="faq.html">FAQs</a></li>
      <li><a href="services.html">Servizi</a></li>
      <li><a href="contact.html">Contatti</a></li>  
      </ul>
      </li>
    </ul>
  </section>

CSS
codice:
.top-bar { background:none; margin-top:20px;}
.top-bar-section ul li { background:none; padding:0px 20px 5px; line-height:0px;}
.top-bar-section ul li:hover:not(.has-form) > a { background:none; color:#454545;}
.top-bar-section ul li > a { color:#454545; font-size:18px;  text-transform:uppercase; font-family: 'ProximaNovaRegular'; }
.top-bar-section li:not(.has-form) a:not(.button) { background:none; padding:20px 0px 15px; line-height:0px;}
.top-bar-section li.active:not(.has-form) a:not(.button):hover { background:none; border-bottom:4px solid #34b1c4; color:#454545;}
.top-bar-section li:not(.has-form) a:not(.button):hover { background:none; border-bottom:4px solid #34b1c4; color:#454545;}
.top-bar-section li.active:not(.has-form) a:not(.button) { background:none; border-bottom:4px solid #34b1c4; color:#454545; padding:20px 0px 15px; line-height:0px;}
Grazie.