Transition pour un sous-menu

Bonjour,

Je souhaite faire une transition sur la hauteur à l'ouverture de mon sous-menu qui s'ouvre en cliquant sur un lien par le biais d'un js. Je ne souhaite pas faire cette transition avec un :hover mais au clic et je ne sais pas comment m'y prendre si vous pouviez me mettre sur la voie.

Voici mon html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="nav" class="nav navbar-nav">
                    <li><a href="#"><i class="fa-pos fa fa-home"></i>
 Accueil<span id="btn_moins" onclick="sous_menu()"></span><span id="btn_plus" onclick="sous_menu()"></span></a>
                            <ul id="sous_menu">
                               <li><a href="#">Morning star</a></li>
                               <li><a href="#">Vivienne's Omitted Line</a></li>
                               <li><a href="#">Gravitational Pull</a></li>
                           </ul>
                    </li>
                    <li>
 <a href="#qui"><i class="fa-pos fa fa-exclamation-circle"></i> Qui sommes-nous ?</a></li>
                    <li><a href="#contact"><i class="fa-pos fa fa-pencil-square-o"></i>
 Contact</a></li>
                          </ul>

J'imagine quelque chose comme :

Code:

1
2
3
4
5
6
7
8
9
10
#sous_menu {
    display:none;   
}
#nav ul {
	max-height:0em;	
	transition: 1s max-height 0.3s;
}
#nav > li:hover ul {
	max-height: 13em;
}

mais là, c'est sur li:hover et je souhaite que ça soit au clic.

Je vous remercie de votre aide.