Pure CSS Pulldown Menus

Note: This document is being revised to work properly with the new site template. | July 10/03

Modern browsers are now beginning to support the :hover pseudo-class to create rollover effects on other elements as well. This lets us create a rollover effect on a paragraph, or other section of text. Being able to set the style for an element's rollover state also allows us to control the style of elements within the element that is being rolled over. The sub-lists are normally hidden but become visible by rolling the cursor over the visible list items they are contained within. The links in the sub-list are now accessible, and can be used normally.

Browsers without CSS support will be presented with a simple series of nested lists.

Example

Mouse over the menu items below to reveal the links. (Note: Most of these links are just placeholders for now)

As of this writing all versions of Internet Explorer only support the :hover pseudo-element on links. Hopefully this will change in future versions. Until then, the following example will work in Mozilla, Netscape 6+, Opera 7, Safari, and Camino .