Tall Ships Leaving Dublin Bay

Tall Ships Leaving Dublin Bay, a set on Flickr.

Passing Bull Island and Howth

Links in Dropdown CSS menu not working in FireFox 14.01

I came across an obscure css sequencing problem today which occurred after an update to Firefox 14.01.

PROBLEM:

A css dropdown menu that uses focus and hover to show/hide submenu links stopped working in Firefox 14.01. The dropdown menu appears, but clicking on the link causes the menu to freeze and the user cannot navigate to the link by clicking on it.


SOLUTION

The CSS code hides each submenu by setting the margin-left to -9999px, and shows it on hover by setting the margin-left to 0px; The cascading rules for this operation were as follows:


#nav ul,
#nav :hover ul ul,
#nav .hover ul ul { margin-left: -9999px; }
#nav li:hover>ul,
#nav li.hover>ul,
#nav a:focus+ul,
#nav ul ul,
#nav .hover a:focus a:active { margin-left: 0; }
#nav ul a:focus { margin-left: 9999px; }


It appears however that a change in the sequence the CSS is parse/run in Firefox 14.01 caused the last line to take effect after the link is clicked but before the browser evalutes the link and navigates to the page causing the element to move away before the click takes effect, perhaps because the sequence is hover->focus->active when clicking on a link.

To fix, I replaced the last line with:

#nav ul a:focus { margin-left: 0px; }

which stops the element from moving so that the click can be registered in Firefox 14.01.