Two-level navigation
Alex Robinson posted a CSS challenge few days ago on css-discuss list: using 2-level nested list, create a two-line navigation with the following properties:
-
“current” main item’s sub menu should be always visible
-
sub menus for other items should display on hover
-
menu should be liquid, i.e. to be based on ems rather than pixels
I took the plunge. Excellent example of such navigation is Nokia’s, and the CSS version based on the above is here.
Version with floated box fails in IE/Win. In that example, each item is floated to the left, and IE calculates width:100% for absolutely positioned nested lists from the left edge of the item instead of full viewport width. Yet another IE/Win bug. :(