navigation menu, need help with mouseout function

I have a navigation menu.
When you mouseover, there's a sub-menu that appears. It remaining until you mouseout from the submenu or that "top level" item you mousedover in the first place.

I want to change the mouseout function so it does nothing until you mousover another top-level item in the navigation.

Example Shown here: http://www.courage.ca

startList = 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() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;

onmouseover and onmouseout do not see child elements as child element, but as a completely different element.
So when you enter the child you are technically leaving the parent element, which will trigger the onmouseout.
Likewise onmouseover triggers when the mouse comes from a child element, or from outside.

You can use onmouseleave instead
onmouseleave sees child elements as been a part of the parent, thus it will not trigger when you enter a child.

onmouseleave's "sibling" is onmouseenter.
it will trigger if you enter a child or the element it self.

(entering a child before you enter the element it self, is only relevant if a child is positioned outside the actual borders of it's parent.)

Is there an easy to change in the code provided I could make? Sorry, I'm not a javascript coder so while I understand what you said, I don't understand how to make the change. Thanks