I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent.

The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible?

Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it.

Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions.

Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it.

The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible.

There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible.

There is a demo of this here: CSS menu demo