Pure CSS Dropdown Menu

Question

I have been working on facebook application and you know on facebook native javascript is not allowed, they have their own implementation FBJS which is troublesome when it comes to creating stuff like menus.

Is there any pure CSS dropdown solution without any involvement of javascript (javascript is used in all the solutions i have seen to tackle IE6)?

Answer 1

Yes, there are many approches. Have a look at Listamatic.

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

There are both vertical and hortizonal menus, using pure CSS.

Some working examples:

1. http://www.xs4all.nl/~peterned/examples/cssmenu.html
2. http://www.tjkdesign.com/articles/dropdown/demo.asp

Actually, you can implement a basic list with few lines:

li ul { display: none; } 
li:hover > ul { display: block; }

Note that you need JavaScript if you support IE6 (as it does'nt work with li:hover).

Answer 2

Google recently began phasing out IE6 support and notified their apps for domain customers to upgrade their users. Unless you are serving a market or customer base that you know is using IE6 and is unable or unwilling to upgrade I'd just ignore it and use the :hover solution sans javascript.