We've been using a pure CSS menu bar -- no images or JavaScript -- on personal projects for some time now. Our solution combines the best parts of many of the examples linked in this entry, but did not previously include a "you are here" marker. We're now using an indicator developed by Eric Meyer and brought to our attention by Jeffrey Zeldman.
Older versions of Opera (6.0 and before), IE 6 for Windows, and most other modern browsers disagree by one pixel on how to display this design's absolutely positioned menu div. The result is that at least three distinct sets of CSS positioning rules are needed: for IE 6; for Opera 7 and Gecko browsers; and for all versions of Opera before 6.0. We're using the lifesaving Owen Hack to serve each of these browsers a different set of rules. See this document's corresponding CSS for our solution.
Why didn't we simply use position: floatfloat? We didn't want to disrupt the flow of the page in devices that display it as an unstyled document, such as wireless phones.
This design has been tested -- and works as expected -- in Opera 6.0 and 7.0, Mozilla 1.3, Mozilla Firebird 0.6, and Internet Explorer 5.5 and 6.0. We're working on Opera 5. Alas, we do not have access to a Mac, so this design has not been tested on a single Mac browser. This keeps us up at night.
This design uses valid CSS and XHTML 1.0 Strict