var opHigh = 100; // highest opacity level  
var opLow  = 50;  // 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('menu').getElementsByTagName('a');  
  for (var i=0; i<mi.length; i++){  
    mi[i].onmouseover = function(e) {fade(this, opHigh, -10)} // fade in  - positive step  
    mi[i].onmouseout  = function(e) {fade(this, opLow, 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 (15ms pause between calls)  
  if (opLow <= opacity && opacity <= opHigh) setTimeout(function(){fade(mi,opacity,step)}, 30);  
}