Ciao a tutti,
premetto che mi sto avvicinando ora al mondo del web, ho un menù responsive funzionante:
<header>
<div class="wrap">
<nav>
<ul id="top-menu">
<li><a href="#home">h</a></li>
<li><a href="#about">a</a></li>
<li><a href="#team">t</a></li>
<li><a href="#services">s</a></li>
<li><a href="#contact">c</a></li>
</ul>
<div id="pull">
<span class="btn">Menu</span>
</div>
</nav>
</div>

Ma vorrei che si chiudesse quando clicco sulle voci della tendina. Ora resta aperto e si chiude solo se clicco su Home (apre e chiude la tendina del menu), questo il css:
/* Responsive styles ========================= */


@media screen and (max-width:1020px) {
.wrap {
width:86%;
}
}
@media screen and (max-width:768px) {
.col1,
.col2,
.col3,
.col4,
.col5 {
width:100%;
float:none;
margin:0 0 20px;
}
}
@media screen and (max-width: 680px) {
header {
height:40px;
}
nav ul {
display: none;
height: auto;
text-align:left;
width:100%;
margin-top:40px;
}
nav ul li {
display: block;
float: none;
width: 100%;
padding-left:10px;
border-bottom:1px solid #008ce5;
background-color:#ffffff;
}
nav ul li:hover {
background-color:#008ce5;
}
nav ul li a {
padding:10px;
line-height:20px;
border:none;
}
nav ul li.active a,
nav ul li a:hover {
border:none;

}
#pull {
display: block;
}
#home {
margin-top:40px;
padding:100px 0;
}
}

Qualcuno riesce a dirmi come modificarlo per cortesia?
Grazie comunque.