Creating web site navigation using HTML lists and styling them with CSS has a certain elegance to it, and I’ve used it for all the sites I’ve built in the past two or three years. But I still find the CSS styling painful and often struggle to get just the effect I want. Like so much of CSS, it has just enough complexity to take something that seems reasonably simple, make it not quite intuitive, and provide a multitude of subtle ways to go wrong.

I recently came across the Listamatic page at the excellent CSS tutorial site from maxdesign, a site that provides several dozen quality examples of horizontal and vertical navigation buttons styled with CSS. For each version, the site provides a simple and clean presentation, with a working illustration, the corresponding HTML and CSS code, and a link to the originator’s site. There’s also tutorial sections on the box model, browser issues, and the other arcana that make this simple task just a little complicated. I’ve found it to be an excellent resource.