WWW FAQs: How do I add roll-over drop-down menus to my HTML?


2007-03-22: Some websites feature menus that expand as you roll the mouse over them. But as you may have figured out by now, HTML doesn't have a <rollovermenu> element. So how do they do it?

With modern web standards, it shouldn't be that hard: just use the :hover CSS pseudoclass. Unfortunately, to make a long story short, Internet Explorer 6.0— still a very popular browser - does not support :hover, except on links. And you can't nest links... and menus without links aren't very useful!

Fortunately, others have researched this issue thoroughly and found the best workaround available. Their solution works without a hitch in newer browsers (including Internet Explorer 7) and also works in Internet Explorer 6, as long as JavaScript is available.

So I'm not going to duplicate their excellent work here. The best and cleanest implementation of dropdown menus for all browsers is found in the article Son of Suckerfish Dropdowns, by Patrick Griffiths and Dan Webb. So check that link out now and you'll be up and running with dropdown menus (and even nested dropdown menus!) in no time. You should benefit from their hard work and not try to reinvent the wheel.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!