Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final.
<html>
<head>
<title>Menú con efecto de transición</title>
</head>
<p align="center"><b>Menú con efecto de transición
<script>
hex = new Array(8)
set = new Array(4)
set1 = new Array(0,0,0,0,0)
hex[0] = "CCCCCC"
hex[1] = "BBBBBB"
hex[2] = "AAAAAA"
hex[3] = "999999"
hex[4] = "888888"
hex[5] = "777777"
hex[6] = "666666"
hex[7] = "555555"
hex[8] = "444444"
function rollon(n){
if (n==1){set[1]=1}
if (n==2){set[2]=1}
if (n==3){set[3]=1}
if (n==4){set[4]=1}
}
function rolloff(n){
if (n==1){set[1]=0}
if (n==2){set[2]=0}
if (n==3){set[3]=0}
if (n==4){set[4]=0}
}
function color(){
if (set[1]==1){
if (set1[1]==8){} else{set1[1]++ ;item1.style.background = hex[set1[1]] }
} else {
if (set1[1]==0){} else{set1[1]=set1[1]-1 ;item1.style.background = hex[set1[1]] }
}
if (set[2]==1){
if (set1[2]==8){} else{set1[2]++ ;item2.style.background = hex[set1[2]] }
} else {
if (set1[2]==0){} else{set1[2]=set1[2]-1 ;item2.style.background = hex[set1[2]] }
}
if (set[3]==1){
if (set1[3]==8){} else{set1[3]++ ;item3.style.background = hex[set1[3]] }
} else {
if (set1[3]==0){} else{set1[3]=set1[3]-1 ;item3.style.background = hex[set1[3]] }
}
if (set[4]==1){
if (set1[4]==8){} else{set1[4]++ ;item4.style.background = hex[set1[4]] }
} else {
if (set1[4]==0){} else{set1[4]=set1[4]-1 ;item4.style.background = hex[set1[4]] }
}
setTimeout("color()",100)
}
</script>
</b>
<body onLoad="color()">
</p>
<table border="1" cellpadding="0" cellspacing="0" bgcolor="cccccc"
bordercolor="#000000">
<tr>
<td width="100" id="item1" onMouseOver="rollon(1)" onMouseOut="rolloff(1)">
<p align="center"><font color="cc0000">Menú</font></td>
</tr>
<tr>
<td id="item2" onMouseOver="rollon(2)" onMouseOut="rolloff(2)">
<p align="center"><font color="cc0000">Intro</font></td>
</tr>
<tr>
<td id="item3" onMouseOver="rollon(3)" onMouseOut="rolloff(3)">
<p align="center"><font color="#CC0000">Vínculo </font><font color="cc0000">
1</font></td>
</tr>
<tr>
<td id="item4" onMouseOver="rollon(4)" onMouseOut="rolloff(4)">
<p align="center"><font color="cc0000">Vínculo 2</font></td>
</tr>
</table>
</body>
</html>
Descargar