CSS Dropdown Menus - Good or Bad?

October 20, 2006

Navigation for websites can be achieved in several ways such as flash, javascript, or plain old html. But..have you considered creating a dropdown menu using CSS ?

This blog won’t tell you how to create the menu as there are plenty of tutorials on the subject but is intended as a discussion on the merits and pitfalls of using this technique from an SEO point of view.

A navigation system written in Flash, Javascript or any other method where the code is hidden is clearly not going to be spidered by the search engines so a system where the code is clear is an obvious winner. Using html and CSS you can create a dropdown menu as effective as if you’d created it in flash but the difference is the code is highly visible to search engines making it easier for spiders to follow the navigation links to other sections of the website.

The downside to CSS dropdown menus is that there is a problem with Internet Explorer which means that dropdown menus which work in Firefox and other browsers will not function in IE. The culprit is IE’s hover pseudo-class for the A element.

Before you abandon CSS dropdown menus as a bad idea, there is a solution. This is to use Javascript’s mouse over effects.

Hope this helps.

Peter Williams
Senior Programmer