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.