The above menu uses images instead of text labels for the items in the main menu bar. This allows for nicer look, at the price of some bandwidth. Note that accessibility is still not a problem (try this page with Lynx or other text-mode browser, or with a graphic browser with JS disabled). That's because we included "alt" tags for images.
This setup is quite simple and it requires you to write some small CSS rules that specify images for the normal item, for hover-ed items and for active items, and to remove the padding and spacing from the main menu bar items.
For reasons beyond understanding, Internet Explorer 6 fails by one pixel if the image height is an even number. For instance, our images are exactly 26 pixels high, but if we pass height: 26px IE will leave a 1px top margin (!!). This browser has a mind of its own. Resolution was to pass 27px. In conclusion, try to create images with an odd height. :-)
Please see the source of this page to see how it's done. The code is heavily commented for your reference.
Err, don't kill me for those images, I'm not an artist. ;-)