Late last week, a client contacted us with a request to add a dropdown menu to their Web site. Being a fairly content-heavy site, this made a lot of sense. So often, when coming up with designs and wireframes for a Web site we neglect to add this sort of functionality in. From a usability side of things its a great help and it also degrades gracefully, when using standards-based XHTML.

In the case of this client site – like I had done before on a number of occasions – the CSS dropdown implementation “Son of Suckerfish” was used. This solution is very clean and standards-based. The only “con” is that JavaScript needs to be enabled for IE6 (and older) browsers.

Adding functionality like this to an existing site, especially when it is CSS-based, is always a bit of an adventure since the existing styles conflict and/or override those used by the module (in this case, the Suckerfish dropdown). I find the best way to avoid the headache is to “reset” all the existing styles that point to the HTML elements that are being added (Firebug works wonders for this) and then copy in the styles that are to be applied to the new module.