Mouseover UL Child Nodes Not Right
<p>This works in IE8, but not IE9, FF8 or FF9.  It seems like something that should work though.</p>

<p>The intended behavior:  When you scroll over the LI, it should pop an alert with that node's LI id.  </p>

<p>The actual behavior, when you scroll over the 2nd element (node[1]), it alerts the id for node[0].  When you scroll over node[0] or node[2], the alert gives an undefined.</p>

<p>Can anyone help me make sense of this?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;style type="text/css"&gt;
.outputUl{
    margin: 0;
    padding: 0px;
    list-style: none;
    width: 200px;   
}
.outputLi {

}
.outputLiSelect {
    background-color: #069; 
    cursor: pointer;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;ul class="outputUl" id="meganFox"&gt;
    &lt;li id="li1"
        class="outputLi" 
        onmouseover="setSelect(1);"&gt;Frank&lt;/li&gt;
    &lt;li id="li2"
        class="outputLi" 
        onmouseover="setSelect(2);"&gt;Bob&lt;/li&gt;
    &lt;li id="li3"
        class="outputLi" 
        onmouseover="setSelect(3);"&gt;Jeff&lt;/li&gt;
&lt;/ul&gt;

&lt;script language="javascript"&gt;
function setSelect( num ){
    var nodes = document.getElementById('meganFox').childNodes;
    num = num - 1;
    nodes[num].className = 'outputLiSelect';
    alert( 'id '+nodes[num].id );
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
