a href"#" is not working with :focus on firefox browser

Question

I have this menu that I customized to use it like a select. It work just fine on ie, chrome but on firefox is not working. Normal behavior is: when menu is expanded on focus the links are displayed (help and logoff) and if you click on them will be redirected in other page in the same browser. Wrong behavior on firefox: menu si expanded on focus but links (hep and logoff) are not redirecting.

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

Why is doing this firefox??? I have last version of ff :|

here is a fiddle example: http://jsfiddle.net/RwtHn/1152/

Answer 1

It's because the instant you press down on either "Help" or "Log Off" the encompasing a element gets the focus and is active, which "deactivates" this rule:

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

Thus the link (or more specifically the ul encompassing the link) vanishes before the click on the link has been completed.

At least this seems to be how firefox handles it.

EDIT: It should work with adding the selector

#main li.username:active ul

to above rule.

Answer 2

Change your final rule to this:

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

The #main li ul:hover rule means that the submenu will stay open long enough for the click to register.

See forked JS Fiddle

p.s. Cool trick, I've never seen a select box launched like this before.