CSS Menu Examples

The following menus are examples of applying CSS to an unordered list (<ul>). No graphics are used. Some features behave slightly differently on different browsers and may not be supported by old versions (4 or lower). You can examine the styles sheets by viewing the source of this page. Slight changes have been made to interoperate with this site's existing CSS. Note that some menu structures require that there be no whitespace between list items.

These examples are based on Eric A. Meyer's Minimal Markup, Surprising Style page.

For yet more fun with CSS, check out Maxdesign's various demos.

Simple Separators


Strengthening Links

Hanging Tree



Navbar: Traditional

Navbar: Simple Inlining

Tabbed Styles