CSS Menu—Click version


The stylesheet is focus-menu.css.

This is menu is based on "Pure CSS menus"; but instead of using :hover to show the sub menus, this uses :active. The sub menu—which is a list— uses the :hover to keep it showing after the user releases the mouse button. There is 1.5em padding for the top and -1.5em margin for the top to try to overlap the area of the sub menu so the :hover will take effect immediately (hopefully). But if you click then unclick without moving the mouse, the sub menu hides. If you click—then move your mouse—and then release, the sub menu still shows.

I tested the page in Mozilla 1.2 beta.

© 2003 Seamus P. H. Leahy
You may take and improve upon this.