This is an adaptation of the ideas from Stateful CSS Mouseovers for use as a CSS menu. In this example, the frame is only the height of the menu bar, which doesn't give you any room to be "stateful". Yet another take on CSS-powered menus.
The HTML of the menu looks like this:
<ul id="menu">
<li><a id="games" href="/games/">Games</a>
<ul>
<li><a href="/games/PS2/">PS2</a>
<li><a href="/games/Xbox/">XBox</a>
</ul>
</ul>You can view the entire CSS used in this menu with view-source, to save you a boring explanation of every rule.
The menu iteslf uses the same no-offset relative position in order to act as a containing box to the absolutely positioned elements inside it. When hovering over the top-level menu item, its sub-menu will appear horizontally below it.
I removed the default style for the unordered list and list items. This prevents their default margins and markers from showing up.
Both the top-level menu item and the second level list are absolutely positioned. The top-level menu items are absolutely positioned across the top part of the menu bar, and the sub-menus are all positioned at the bottom left of the menu bar. Naturally you can adjust the positions of both to suit your needs.
While this method is not directly supported by IE, a bit of JavaScript can fix that. The only non-IE CSS selector used is :hover, so some care must be taken when creating the menu. For example, the top-level menu item needs to absolutely positioned, but the sub-menu items must be staticly positioned.
The rule #menu a { position: absolute; } must be
accompanied with a rule #menu ul a { position: static; } to
undo the static positioning. The extra ul in the second selector allows
the sub-menu to be selected for styling.
The rest of the CSS is fairly straight forward. To get the sub-menu to
show up, the rule #menu li:hover ul { display: block } is
used, which causes the menu to appear directly below the top-level
menu items.