FYI, detecting IE with document.all is a bad practice.
The only inconsistency I find is that this:
Code:
#nav li:hover ul, li.over ul
isn't this:
Code:
#nav li:hover ul, #nav li.over ul
Other than that, I see no problems whatsoever in your code. If the links' style is that important to you, all I can suggest is a warning to not view the page in IE.
EDIT: I don't think this will help, but try using it instead of your current JS. It makes sure a space doesn't lead the first class name.
Code:
window.onload = function() {
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() {
var classes = this.className.split(' ');
classes.push('over');
this.className = classes.join(' ');
}
node.onmouseout=function() {
var classes = this.className.split(' ');
for(var i = 0; i < classes.length; i++){
if(classes[i] == 'over'){
classes.splice(i, 1);
}
}
this.className = classes.join(' ');
}
}
}
}
}
Bookmarks