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

Panelize

Strengthening Links

Hanging Tree

Expanding

 

Navbar: Traditional

Navbar: Simple Inlining

Tabbed Styles