Script que no funciona en Fire Fox

[Elalux]

Saludos maestros, he aquí mi cuestión.

Dese hacer un menú desplegale y enrrollable, si ya se, hay mucho script por ahí, pero decidí hacer lo más posible por mi cuenta para entender el proceso.

Después de tomar pedazos de otros códigos, analizarlos, modificar, cambiar, cortar, hechar a perder para luego tener que reparar, el script está cási como deseo, sin embargo, aunque funciona sin probelmas en IE en Firefox ni se mosquea el desgraciado

La lógica es la siguiente:

1.- Las opciones secundarias de cada opción principal primero estan ocultas utilizando una clase CSS con visibilidad "none".

2.- Al hacer click encima de una de las opciones principales se llama a una función de JavaScript (abrir), que funciona de la siguiente manera:

i. Cierra todas las opciones principales y luego abre la opción "clickeada".

ii. Si la opción "clickeada" esta abierta, la cierra.

Pueden ver la prueba en el siguiente enlace:

www.finred.com.mx/menu/

Se darán cuenta que con IE funciona bien, pero con FF no, ya le he estado dando vueltas y no le busco, agradezaco desde ahora cualquier ayuda.


Saludos.

Todo el código JavaScript y las clases CSS que muestran y ocultan las opciones estan en la misma página, basta con ver el código fuente, de todas formas las pongo continiación:

Clases CSS para mostrar y ocultar:

.hidden {
display:none;
}

.show {
display:block;
}

Función abrir:

function abrir(nombre) {
//Elemento "clickeado"
elemento = document.getElementById(nombre);

//Si el elemento ya estaba abierto entonces simplemente lo cerramos...
if(elemento.className == "show") {
elemento.className = "hidden";
return false;
} else {

//Si el elemento no estaba abierto entonces cerramos todos y posteriomente lo abrimos...

//Elementos que ocultaremos
elementos = new Array("clase_1","clase_2","clase_3","clase_4");

//Ocultando
for(i=0;i<elementos.length;i++) {
elemento_normal = document.getElementById(elementos[i]);
elemento_normal.className = "hidden";
} //for

//Mostrando el elemento "clickeado"
elemento.className = "show"; //Si estaba oculto entonces se muestra
return false;

} //else
} //function

Menú:

<a href="#" class="clase_1" onclick="return abrir(this.className);">Elemento uno</a>
<div id="clase_1" class="hidden">
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
<!--posicionado-->
</div>
<br>
<a href="#" class="clase_2" onclick="return abrir(this.className);">Elemento dos</a>
<div id="clase_2" class="hidden">
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
<!--posicionado-->
</div>

<br>
<a href="#" class="clase_3" onclick="return abrir(this.className);">Elemento tres</a>
<div id="clase_3" class="hidden">
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
<!--posicionado-->
</div>

<br>
<a href="#" class="clase_4" onclick="return abrir(this.className);">Elemento cuatro</a>
<div id="clase_4" class="hidden">
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Opcion</a><br>
<!--posicionado-->
</div>