CSS Cascading Menus

If you're even partway interested in the web and the position of your web pages in the major search engines you will undoubtedly have noticed that big things have been happening to how and when Google indexes web pages. This is mainly as a result of their Bigdaddy datacentres and the changes to indexing software. This means that incoming links from good sites (without reciprocal outbound links) are becoming more and more important in terms of which sites Google index and how deeply they index sites. As a result, the more help you give the indexing bots the more likely they are to find the internal links on your site and to actually crawl those links.

Expanding dropdown menus are an useful way of providing navigation to your users in a pretty, intuitive and space-efficient manner. However, the standard ways of implementing these types of menus (in frames, using JavaScript) means that they will probably never be indexed by the search bots. How, then, can you provide the same functionality to your users, whilst also allowing the bots to find and cache your valuable links.

The answer is to use CSS (Cascading Style Sheets) which is a way of defining styles used to mark-up standard HTML tags and elements in what can be very beautiful ways. In fact, you can encode your menu as a standard unordered list cascade and then use CSS markup to turn this into a cascading menu.

In essence this is done by hiding the leaf nodes of the menu and only revealing them when a mouseover event occurs. If you use the following CSS code:

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

it achieves precisely this for you. You can now achieve the hid-and-reveal functionality of a menu, but what you have is still only a list (albeit with some cool functionality). It will take quite a bit more CSS style to convert this into a proper cascading menu. To achieve this you will need to add the following CSS code:

#menu {
width: 105px;
background: #0000FF;
margin-left: 5px; 
position: absolute; 
top: 180px; 
left: 0px;
}


#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu a, #menu h2 {
font: bold 9px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #000;
background: #FFFFCC;
text-transform: uppercase;
}

#menu a {
color: #666666;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

Note that the first #menu item in the CSS code above defines where the menu box should be located on the page (in my case it's on the left-hand side of the page just below my standard page header. After this come the functions that take care of how each element in a menu apears and how they are positioned relative to one another. Apply all the code above to an unordered list within a <div id="menu"> block and you will get your cascading menu.

To see such a menu in action have a look at this recipe page. If you want step-by-step instructions (with examples and complete code) for how to implement these CSS menus have a look at this CSS menu guide page.

Because the indexing bots view web pages as if they were pure text (they do not apply style sheets and do not look at JavaScript) when they encounter a CSS menu it simply looks to them like an unordered list of URLs and each and every link is cached and navigated. Which is precisely the kind of behaviour that we want the bots to perform.