1 down

I did the first thing on the list below (adding the events from outside using only the DOM) which is good enough for me. Now I've just gotta apply this to my links page. Here's how I used the DOM to isolate the anchors in the main list from the anchors in the sublist to apply the events.

First I grabbed all the anchors in the list:

getElement('linksList').getElementsByTagName('A');

Next I had to loop through all the anchors and see how deeply nested they were. With the DOM there are two directions to look, down into the children or up at the parents. To me the simplest way to determine how deep a given anchor is was to create a negative test case looking up 3 levels. What is up 3 levels? Well, if you are an anchor in the sub-list there's a list item up there (a > li > ul > li ). If you are one of the main list anchors you outside of the lists altogether (a > li > ul > div ), but that doesn't matter because I just tested to see if you are not in the sub-list:

a.parentNode.parentNode.parentNode.nodeName != "LI"

and then assigned my events

a.onmouseover = function(){showSiblingList(this);}
a.onfocus = function(){showSiblingList(this);}

Here's the JavaScript: linkList.js