JS LI:HOVER FIX

Simple LI:Hover fix needed for unordered lists, navigation.
This function is needed for Internet Explorer 6 only.

//author: ?, I found this useful.
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; 

<!-- start navigation -->
<div id="navigation">
<ul id="nav">
<!-- main item 1 -->
<li class="item1"><a href="#nogo" title="Demo"><span>MAIN 1</span></a>
<!-- dropdown or flyout 1 -->
<ul>
<li><a href="#nogo" title="Demo">SUB 1.1</a></li>
<li><a href="#nogo" title="Demo">SUB 1.2</a></li>
<li><a href="#nogo" title="Demo">SUB 1.3</a></li>
<li><a href="#nogo" title="Demo">SUB 1.4</a></li>
</ul>
</li>
<!-- main item 2 -->
<li class="item2"><a href="#nogo" title="Demo"><span>MAIN 2</span></a>
<!-- dropdown or flyout 2 -->
<ul>
<li><a href="#nogo" title="Demo">SUB 2.1</a></li>
<li><a href="#nogo" title="Demo">SUB 2.2</a></li>
<li><a href="#nogo" title="Demo">SUB 2.3</a></li>
<li><a href="#nogo" title="Demo">SUB 2.4</a></li>
</ul>
</li>
</ul>
</div>
<!-- end navigation -->

When I get some more "free" time will add online demo and CSS styling.
For now I would recommend : Sons of Ursidae Menu , vey accessible and ELEGANT solution.
The complete article: Click Here.

Related Pages