This menu and hundreds more demonstrations can be found at www.cssplay.co.uk.
Photographers control the camera and lens to "expose" the light recording material (such as film) to the required amount of light to form a "latent image" (on film) or "raw file" (in digital cameras) which, after appropriate processing, is converted to a usable image. Digital cameras use an electronic image sensor based on light-sensitive electronics such as charge-coupled device (CCD) or complementary metal-oxide-semiconductor (CMOS) technology. The resulting digital image is stored electronically, but can be reproduced on paper or film.
With this menu you have a choice of hovering and clicking the top level text to take you to another page, OR clicking the down arrow at the right of each tab to open the sub menu list. The list will stay open until you click another top level link or elsewhere on the page.
The menu can be tabbed to access all the links including the dropdowns.
Tested and working in IE6, IE7, IE8, Firefox and Opera.
Safari and Google Chrome have a problem with their interpretation of the mouse click. If you need this to work in these browsers then you would have to change to a :hover dropdown.
Google Chrome will allow you to tab through the menu.
Safari will need to have the Preferences > Advanced Options > Press Tab to highlight each item on a webpage - 'ticked', and then you can use keyboard tabbing to select items in this menu.
This menu uses no javascript (of any sort), no hacks, no tables, no Microsoft specific code and no conditional comments.
Update - 3rd October 2009
Now you can click the down arrow to open the sub menu list and then click the red up arrow to close it again. Who would have thought this possible with just CSS.
Copyright ©2009 stu nicholls - cssplay.co.uk