What is this?

This is a pop-up menu system, written entirely with CSS. No JavaScript used.

This menu works correctly on user agents (AKA browsers) that correctly understand W3C specifications about CSS. Look at screenshots section to see how browsers display this page.

Features

• Pure CSS menu, no JavaScript used.
• Ultra clean HTML code. No extra tags needed. Only <ul>, <li> and <a> used.
• Multi-level nested pop-up menu.
• Works perfectly on browsers without CSS support. The menus will be displayed as a nested unordered list.
• Nice "enlarge" effect when mouse is over horizontal menu items.
• Nice semitransparent shadow under pop-up menus.
• Horizontal menu will wrap nicely if there is no enough room to fit all item at same line.

Limitations

• At most 3-level deep menu (not counting the main horizontal one). It should be easy to modify it to support more levels, but this is not needed. No site should have very deep pop-up menus.
• Menus have a fixed width. This is needed for avoiding auto-width calculation bugs. The width currently is measured in em, so it will scale according to font-size. In addition, it is very easy to change this width.
• The horizontal menu is left-aligned.
• Only one menu per page. This happens because of id="nav". Should be easy to change this id to class.
• Horizontal menu items should be small and not wrap, or menu will be very ugly.
• If window height is not big enough to display entire menu, lower menu items won't be available.

Bugs

There may be some "rounding" errors, and some items being moved one or two pixels when mouse is over the menu. This is a minor bug, and does not affect menu behavior.

Another possible bug existent in all drop-down menus is "mouseOut" being triggered when the user is moving the mouse over the menu. This is avoided in this menu by overlapping child-menu and parent-menu some pixels.

The shadow won't work on browsers without PNG Alpha support.

When we enable enlarger feature and we don't specify a fixed width for horizontal menu items, then Firefox will change their width when moving mouse over them. If we specify a fixed width, the text position will be changed (will not be always centered).

Sometimes Firefox 1.0 will display a menu item box taller than needed to display the text inside it. Fixed in Firefox 1.5.

Opera 8 does not respect the z-index: 2 in enlarger code. So, enlarged menu item will be displayed behind the menu item at right of it. Fixed in Opera 9.

IE users

As someone said at #CSS channel on FreeNode: IE is an insult to W3C standards!

IE is the browser (if we can call it as browser) that most misunderstands W3C standards (in special, CSS).

All IE users are advised to stop using that piece of crap and start using Opera, Mozilla Firefox or any other decent browser.

Screenshots

I must really thank Tarquin Wilton-Jones for sending me 5 screenshots for platforms I don't have access to.

• Opera 9 preview build 206 (2006-03-31) (Linux) - Works.
• Opera 8.01 (Linux) - Works. Opera 8.5 is not different than this.
• Mozilla Firefox 1.5.0.2 (Linux) - Works.
• Mozilla Firefox 1.0.4 (Linux) - Works, some noticeable bugs.
• Mozilla Firebird 0.7 (Linux) (old menu version)
• IE7 beta (Windows) - Almost works; there are little gaps between items if one has a submenu, and hovering that gap makes the menu close.
• IE5 (Mac) - See yourself ;-).
• IE (Windows) (old menu version, but I really don't care if it will work with IE or not)
• Konqueror 3.5 (Linux) - Works. Also works on versions 3.2+.
• iCab 3 (Mac) Works.
• Safari 1.3 (Mac) Works. Also works on OmniWeb 4.5+.
• LynxView - by Delorie (you need to copy and paste the link, to avoid sending the "referer")

Links

• www.HowToCreate.co.uk - Great site of Mark 'Tarquin' Wilton-Jones. High-quality tutorials there. I must really thank him for helping this page, by sending screenshots and putting a link on his page.
• Tarquin's CSS Menu - Thanks for linking to my menu!
• W3C CSS 2.1 specification
• Eric Meyer: CSS
• BrowseHappy

Final notes

This menu was first based on another menu a friend copied from somewhere. However, I rewrote almost everything, and this can be considered a "new" menu, not based on any other.

Thanks to all people who created CSS effects and menus before me. Some ideas I "stole" from countless menus and CSS tricks I saw.

This menu and all related CSS is completely free. Feel free to use it anywhere you want. Don't abuse it, though :).

Who am I?

My name is Denilson, I'm a Computer Science student at UFRJ. I live in Rio de Janeiro, Brazil.

You can contact me. Sometimes you can find me at FreeNode or Opera IRC, with nickname CrazyTB