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.
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