On Click

[Joaca]

Hola todos.

tengo el siguiente codigo.

Código:

.desplegable ul{
    display:none; text-align: center; list-style:none; height:100px; width:320px; margin-top:14px; margin-left:-41px;
}
.desplegable:hover ul{
    display:inline; list-style:none; height:100px; width:320px; margin-top:14px; margin-left:-144px; text-align: center; float:left;
}

pero quiero volverlo no cuando pase el mouse si no cuando se haga click.

y el codigo de la lista es.

Código HTML:

<ol>
<li><a href="index.html">INICIO</a></li>
<li><a href="reel.html">REEL</a></li>
<li class="desplegable">PORTAFOLIO
      <ul>
          <li><a href="animacion.html">ANIMACIÓN</a></li>
           <li><a href="aplicaciones.html"><div class="flecha">APLICACIONES</div></a></li>
           <li><a href="diseno.html">DISEÑO</a></li>
      </ul>
<li><a href="contacto.html">CONTACTO</a></li><div class="barra_abajo"></div>
</ol> 

Gracias.

[alanmedbel]

algo como esto

Código HTML:

<style>
.desplegable ul{
    display:none; text-align: center; list-style:none; height:100px; width:320px; margin-top:14px; margin-left:-41px;
}
</style>
<script>
function click(id){
document.getElementById(id).setAttribute('class','')
}
</script>
<ol>
<li><a href="index.html">INICIO</a></li>
<li><a href="reel.html">REEL</a></li>
<li id="li" class="desplegable" onclick="click('li')">PORTAFOLIO
      <ul>
          <li><a href="animacion.html">ANIMACIÓN</a></li>
           <li><a href="aplicaciones.html"><div class="flecha">APLICACIONES</div></a></li>
           <li><a href="diseno.html">DISEÑO</a></li>
      </ul>
<li><a href="contacto.html">CONTACTO</a></li><div class="barra_abajo"></div>
</ol>