Aleksandar • Vacić

iOS bits and pieces

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. :(