Horizontal List Demo

20 October 2004

This demo shows how to style an HTML list to appear horizontally, complete with a hover colour on each list item. It's based on the demos at Listamatic which I have improved to allow for current browsers.

Item one
Item two
Item three
Item four
Item five

Notes

The HTML for the list must be joined without linebreaks, else you may see a left gap on hover.
The font-size needs to be 100%. You can solve this by not showing a background colour on the <ul>. (Add to the <a> instead.)
For comments on specific browser fixes used, see the source code of this page.

Browser Support

Works in the following browsers on Windows XP SP2:

Opera 7.54
Opera 8.02
Firefox 1.0.5
Internet Explorer 6
Netscape 6.2
Mozilla 1.7

Last updated: 31 July 2005 · A Design Detector production · Comments