Rollover horizontal list navbar

Making a menu list in Freeway Pro 4 using CSS can be tricky. You must set up at least 5 styles in the Styles palette, four of which target a specific div container.

The whole process seems unintuitive -- crucial elements must be added via extended styles, and the Freeway page itself bears no resemblance to the finished look. However, if you can kinda get what the pieces of this are supposed to do, and how Freeway is putting it all together, it doesn't seem so horribly weird.

And the result is visually elegant, and from a code point of view fairly simple. A little experimenting within the styles palette and you can begin to see what parameters control which appearances. The Listamatic site also lists a wide variety of browsers that are compatible with this solution.

The biggest hurdle I had in Freeway was the leading # in the style tag. Several times Freeway stripped it out, but eventually it gave up.

markup validation | css validation | download the source file (180.94 K) (Freeway Pro 4 required)