var opHigh = 100; // highest opacity level  
   var opLow  = 70;  // lowest opacity level (should be the same as initial opacity in the CSS)  
     
   // register onLoad event with anonymous function  
   window.onload = function (){  
     //  collect menu items and attach onMouseOver and onMouseOut events  
     var mi = document.getElementById('navbar').getElementsByTagName('a'); 
     for (var i=0; i<mi.length; i++){  
       mi[i].onmouseover = function(e) {fade(this, opLow,  10)} // fade in  - positive step  
       mi[i].onmouseout  = function(e) {fade(this, opHigh,-10)} // fade out - negative step  
     }  
   }    
     
   // fade in / fade out function (event handler)  
  function fade(mi, opacity, step){  
     mi.parentNode.style.opacity = opacity / 100;                // set opacity for FF  
     mi.parentNode.style.filter  = "alpha(opacity="+opacity+")"; // set opacity for IE  
     opacity += step;                                            // update opacity level  
     // recursive call if opacity is between 'low' and 'high' values (50ms pause between calls)  
     if (opLow <= opacity && opacity <= opHigh) 
	 	setTimeout(function(){fade(mi,opacity,step)}, 30);  
  }