Menú despleglable acordeón css3

[patim]

En esta web:

[URL="http://waluxaluminium.es"]waluxaluminium.es[/URL]

Necesito que en el menú no desaparezca la lista al pinchar sobre un item desplegado, es decir, si hago clic en "Quiénes somos", por ejemplo, que se mantenga abierto el submenú.

Este es el código html:

Código HTML:

<nav>
        <section id="ac1" class="ac1">  
            <a href="#ac1">Empresa</a>
             <ul>
           <li><a href="#">Quiénes somos</a></li>
           <li><a href="#">Garantía</a></li>
           <li><a href="#">Servicios</a></li>
        </ul>
        </section>  
        <section id="ac2" class="ac2">  
            <a href="#ac2">Productos</a>  
            <ul>
           <li><a href="#">Aluminio</a></li>
           <li><a href="#">Aluminio-madera</a></li>
           <li><a href="#">Techos</a></li>
        </ul>
        </section>  
        <section id="ac3" class="ac3">  
            <a href="#ac3">Accesorios</a>
            <ul>
            <li><a href="#">Herrajes</a></li>
            <li><a href="#">Vídrios</a></li>
            <li><a href="#">Persianas</a></li>
        </ul>
        </section>  
</nav>
 

Y este el css:

Código CSS:

nav section {
    display: block;
    height: 2em;  
    margin: 0 0 0.5em 0;  
    overflow: hidden;  
    padding: 0 1em;  
}
 
nav section:target.ac1, nav section:target.ac2, nav section:target.ac3  {  
    height: 10em;} 
  
nav section {  
    transition: all 1s ease;  
}