Creating Search Engine Friendly Drop-down menus using CSS

drop-down menus are employed by many medium to large size web sites as primary navigation tool for site visitors. Drop-down menus offer many advantages. They are already familiar to computer uses who encounter them in almost all mainstream software. By collapsing when not needed, the menus take up little screen space – yet offer a wealth of options when the user hovers over one of the visible categories.

Technically, the use of JavaScript to code drop-down menus is problematic. While some code can be relegated to an external JavaScript file, much JavaScript usually ends up bloating HTML pages. In most cases, are not able to follow the JavaScript navigation links, leading to poor and visibility.

With the diffusion of modern level 2 compliant browsers such as Netscape, Mozilla, Opera, Firefox and Safari, the use of CSS only drop-down menus has become possible. Once implemented, they are very easy to modify should site navigation needs change. Use of external CSS files to style menus results in smaller page sizes translating into a faster site. are able to crawl CSS styled navigation lists unlike their JavaScript ancestors.

Even better news is on the horizon: IE 7 supports the required CSS functionality necessary for CSS drop down menus (hover on lists). Other CSS support in IE 7 isn’t too bad but is still several years behind browsers such as Opera and Firefox. As an example, negative margins still don’t seem to work in nested lists (the current menu tab in this site does not have a line under it if viewed using a good browser; IE 7 will display a line, as did earlier IE versions). We also noted that the max-width attribute doesn’t seem to be supported. Users should migrate to a modern browser such as Firefox or Opera due to belated, mediocre web standards support in IE.

Required CSS drop-down menu functionality can be simulated in the antiquated IE 6 and earlier using While this file does add overhead the first time a user visits your site, it will only need to be loaded once – and only for old IE browsers if you code your site properly.

A sane approach to implementing CSS is to first create a master CSS file compatible with all of the mainstream web standards compliant browsers (Firefox, Opera, Safari). IE defects can then be addressed by using an additional CSS file after the main css file, depending on the IE version. Any entry in the additional file will override the main standards, taking advantage of the cascading aspect of CSS.

The following logic loads a master style sheet “sito.css”. Using IE specific conditional comments, it also loads the file “ie6.css” for any IE browser through version 6. In addition to fixing IE CSS problems, this file loads the necessary javascript htc file necessary to emulate missing CSS functionality. For IE 7 or higher, ie7.css will be loaded. The .htc file is not referenced as it is no longer needed.

<link href="/c/sito.css" rel="stylesheet" media="all" type="text/css" title="Screen Stylesheet" />
<!--[if lt IE 7]>
<link href="/c/ie6.css" rel="stylesheet" media="all" type="text/css" title="Screen Stylesheet" />
<!--[if gte IE 7]>
<link href="/c/ie7.css" rel="stylesheet" media="all" type="text/css" title="Screen Stylesheet" />

The elegance of this approach is that users with modern browsers (IE 6 was released 5 years ago based on even earlier technology…) aren’t burdened with extra baggage needed to support IE < 7.

Specific implementation instructions can be found consulting alistapart resources as well as Christopher Schmitt’s CSS Cookbook (O’Reilly Media, 2004).

A note about CSS and hidden text is in order.

Search engines have made it clear that the use of hidden text to manipulate a site’s ranking is grounds for removal from their indices. Use of CSS to hide text on your site may trigger a manual review by a search engine. Make sure your site has nothing to fear from an audit! Some companies, such as BMW have had to learn the hard way.

Similar Posts:

Registration is now open for the next SEO Course and Google Analytics Course in Milan. Don’t miss the opportunity!

About Sean Carlos

Sean Carlos is a digital marketing consultant & teacher, assisting companies with their Search (SEO + SEA = SEM), Social Media & Digital Media Analytics strategies. Sean first worked with text indexing in 1990 in a project for the Los Angeles County Museum of Art. Since then he worked for Hewlett-Packard Consulting and later as IT Manager of a real estate website before founding Antezeta in 2006. Sean is an official instructor of the Digital Analytics Association and collaborates with the Bocconi University. He is Chairman of the SMX Search and Social Media Conference, 12 & 13 November in Milan. He is also a co-author of the Treccani encyclopedic dictionary of computer science, ICT & digital media. Born in Providence, RI, USA, Sean received Honors in Physics from Bates College, Maine. He speaks English, Italian and German.