css 101

Lists As Menus

By default, list items are "block-level elements," which means each one gets a line break above and below itself. To make a list appear horizontally, we need to override the default block behavior and use CSS to tell list items that they're "inline" elements instead. In this example, we've also added background-color and padding to our list items, to make them appear like real menu items. Here is the simple HTML and CSS to create a basic list menu.

Which is rendered by the browser as:

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

For a better user experience, we want to add some rollover behavior, so that the list items change color when the mouse rolls over them. To accomplish this, we'll first make our list items into links (in the HTML). Then we'll again use the CSS nested selector syntax to detect a linked item inside of a list item. Finally, we'll use the anchor tag's :hover pseudo-property to change appearance when a list item is in a certain state - namely, when the mouse is hovering over it.

Which is rendered by the browser like this. Roll mouse over list items to see the hover state in effect.

Basic CSS rollover menus like this are pretty easy to create yourself, but for more advanced menus, with nesting and "flyout" items, we strongly recommend using a pre-fab CSS menu solution - that particular wheel has been invented many times over. A lot of CSS positioning is required, and it's very difficult to make them work properly across all web browsers. Try Listamatic for a great collection of free CSS menuing systems.