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;  
}
 

[webosiris]

para eso a la sección que quieres que quede abierta debes de darle una clase "selected" y a dicha clase también darle un height de 10em
y me parece que no son necesarias las clases en el :target, te quedaría así:

Código CSS:

nav section:target,
nav section.selected  {
    height: 10em;}
 

[patim]

Gracias webosiris, pero no me funciona así