You're on the right track but need to change a few things. Here's the revised code with a comment number next to the changes:
window.onload = initMenu; // 1
function initMenu() {
var links=document.getElementsByTagName('a'); // 2
for(i=0; i < links.length; i++) {
var thisLink = links[i];
if(thisLink.parentNode.tagName == "LI"){
setActivity(thisLink);
}
}
}
function setActivity(thisLink){
thisLink.onmouseover = mouseOver; // 3
thisLink.onmouseout = mouseOut;
}
function mouseOver() {
this.parentNode.style.backgroundColor = '#D3FF06'; // 4
return this;
}
function mouseOut() {
this.parentNode.style.backgroundColor = '#171717';
return this;
}
1. When you're setting in an event handler, you only need to assign the function to the handler. In your code, you were calling the actual function rather than assigning it. This meant initMenu() ran before the browser had even gotten to creating the DOM nodes.
2. Whenever possible, you should always use the W3C 'document.getElements...' methods rather than collections such as document.links, .forms or .images.
3. Again, you only need to assign the handler, not call it.
4. Whenever a handler is fired, the 'this' keyword points to the element that you registered it against. In this case you registered 'onmouseover' against a link, so use .parentNode to access the list item.
Hope that makes sense!