DHTML – SEO-friendly drop-down menus with CSS
Many DHTML drop-down (fly-out) menu solutions are complicated to implement, require complex JavaScript arrays, are resource intensive, and can't be read by search engines. This code addresses these issues, and allows you to create menus from <ul> lists very easily, which are SEO friendly.
A little Javascript hack is needed to get the :hover pseudo class to work in Internet Explorer.
<script type="text/javascript">
function startList() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
Here are the style definitions that define the look of the menus, as well as the fly-out behaviour when you move your mouse over an item.
<style type="text/css">
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
display: inline;
}
li ul {
position: relative;
display: none;
top: 20px;
}
/* Styles for Menu Items */
ul li a {
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
}
li ul li, li ul li a {
display: block;
width: 200px;
margin: 0px;
}
/* Fix IE*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
</style>
And finally the HTML code to make the menus. Just edit the lists with your own links and sub-menu links
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>


on August 12th, 2006 at 7:11 am
Very nice. I will use it on one of my future project for sure.
on October 12th, 2007 at 11:20 am
FYI: You have some black text on a black background in the example above. It's just a wee bit hard to read.
on November 9th, 2007 at 2:43 pm
It doesn't work in Firefox.
on March 29th, 2008 at 2:43 pm
Not working properly, contact us and services are also coming as list for About menu
on March 4th, 2010 at 9:11 am
Just came across this post. In not the kind to write reviews but just wanted to say 'thumbs up' for the info.
I would also like to add that today there are also applications that also offer this ( based menus) and save you time from implementing code.
An example is AllWebMenus. It helps you create SEO friendly menus based on . You can test it http://www.likno.com
on March 12th, 2010 at 10:26 am
Nice info.
Came across a program that helps you create SEO friendly menus called AllWebMenus. It is based on UL LI structure. It helped and bots did 'read' the menus. If you are interested, take a look: http://www.likno.com
Hope this helps.
on May 9th, 2011 at 7:57 am
[...] Technical Instructions for How to Implement SEO Friendly DropDown Boxes [...]