Hierarchical dynamic menu with CSS

The menu is made by several nested UL lists. Only (X)HTML and CSS are used for it, no scripts are needed.
Warning: it doesn't work in MS Internet Explorer (yet?).


The menu consists of three different parts: First level LIs are formated horizontaly as absolutely positioned blocks, they are always visible. Their parent UL is formated as single line, 1.2em hight; the em-unit is good, for we can set its exact height depending on actual font size (LI heights and paddings are set by ems, too). All <A> elemements are formated as blocks to fit all menu item's width.

The second-level ULs are verticaly oriented, each bellow its parent LI. They aren't positioned at all, they just flow under top-level menu items. They are hidden due to LIs height and overflow:hidden. In CSS, I set for these LIs:hover higher height and overflow:visible - this makes the nested UL visible until we move out of the (now larger) top-level LI's box.

The third-level ULs are absolutely positioned next to their parent LI, having display:none. The trigger is on their parent LI:hover - it sets them display:block. These 3rd-level ULs may be repeated as may times as we need (the behaviour above 3rd level stays the same). Just look at items 1.2, 1.2.2, and 1.2.2.2 to see the formating.

The style is made to put the menu anywhere in the document's normal flow, even it can be positioned. Due to sizes beeing set strictly by em-units, any font-resize is possible without breaking the menu (actually, it resizes with the font size). Try smaller/larger font size in this document.
See the code for details (CSS is part of this document).

Correct links should be set on every <a href> (on each level) to be sure every user can use the navigation.

Why not MSIE?

This construction works in Gecko-based browsers (tested in Mozilla, Camino), in Opera 7, and Safari (maybe Konqueror, too?). Microsoft decided to implement the :hover pseudo-class for A elements only. That's the reason the menu won't work in any IE browser (there is missing the LI:hover trigger to start the action). However, some Javascript (hopefuly a simple one) may be added to allow this menu in IE as well. Maybe I'll publish it here later...


Petr Stanicek [aka -pixy-] - (c) 2003-05-16, 15:00
http://www.pixy.cz/

TOPlist