a href "#" no funciona: foco en el navegador firefox

Question

Tengo este menú que personalicé para usarlo como una selección. Funciona bien en es decir, Chrome, pero en Firefox no funciona. El comportamiento normal es: cuando el menú se expande en el foco, se muestran los enlaces (ayuda y cierre de sesión) y si hace clic en ellos se redireccionará en otra página en el mismo navegador. Comportamiento incorrecto en firefox: el menú si se expandió en el foco pero los enlaces (hep y logoff) no están redireccionando.

<ul id="main"> 
       <li class="username" tabindex="1" > <a>USER</a> 
        <ul class="curent_buser"> 
         <li class="ai"><a class="jaximus"href="http://en.wikipedia.org/wiki/Wiki">Help</a></li> 
<li class="aj"><a class="jaximus" href="http://en.wikipedia.org/wiki/Wiki" name="logoff">Log Off</a></li>    </ul> 
       </li> 
      </ul> 

¿Por qué está haciendo esto firefox ??? Tengo la última versión de ff: |

aquí es un ejemplo de violín: http://jsfiddle.net/RwtHn/1152/

Answer 1

Es porque en el instante en que se pulsa hacia abajo a ambos "ayuda" o "Salir" del encompasing un elemento obtiene el foco y es activo, que "desactiva" este regla:

#main li:focus ul, #main a:active + ul{ 
display:block; 
} 

Así, el enlace (o más específicamente la ul abarca el enlace) se desvanece antes de haber concluido el clic en el enlace.

Al menos así parece ser como lo maneja Firefox.

EDIT: Se debe trabajar con la adición del selector

#main li.username:active ul 

a la regla anterior.

Answer 2

Cambiar la regla final para esto:

#main li:focus ul, #main a:active + ul, 
#main li ul:hover 
{ 
display:block; 
} 

La regla #main li ul:hover significa que el submenú se mantendrá abierta el tiempo suficiente para el clic para registrarse.

Ver forked JS Fiddle

P. S. Genial truco, nunca antes había visto una caja de selección como esta.