ниспадающее меню с эффектом появления

slaine · Конфигурация компьютера

Вот написал что-то наподобе, но получилась какая-то шняга.
Слишком большая нагрузка на ЦПУ идёт и он начинает пукать.
Может кто знает как писать правильно?

<html>
<title></title>
<head>
<style>
A:link {font-family: tahoma; font-weight: bold; color: red; text-decoration: none};
A:visited {font-family: tahoma; font-weight: bold; color: red; text-decoration: none};
A:hover {font-family: tahoma; color=maroon; font-weight: bold; text-decoration: none};
.a {visibility: hidden; filter: alpha(opacity=0); position: absolute};
</style>
<script language = javascript>
var z = 0;
function aaa(obj){
document.getElementById(obj).style.visibility="visible";
}

function ddd(obj, s){
if (s == 1) r = 1
if ( r == 1){
z = z + 5, document.getElementById(obj).filters.alpha.opacity = z};
if (z >= 100) {z = 100, clearTimeout(w), r = 2};

if (s == 0) r = 0
if ( r == 0){
z = z - 5, document.getElementById(obj).filters.alpha.opacity = z};
if (z <= 0) {z = 0, clearTimeout(w), r = 2};

w = setTimeout ("ddd(1)", 40)
}

function sss(obj){
document.getElementById(obj).style.visibility="hidden"
}

</script>

</head>
<body>

<table border=0 cellspacing=0 cellpadding=0 width=60 bgColor=lime align=center>
<tr>
<td><span onMouseOver="aaa(1), ddd(1, 1)" onMouseOut="sss(1), ddd(1, 0)">HELLO</span></td>
</tr>

<tr>
<td><span class=a id="1" onMouseOver=aaa(1) onMouseOut=sss(1)>
<table bgColor=red border=0 cellspacing=1 cellpadding=2>
<tr bgColor=yellow onMouseOver=bgColor="orange" onMouseOut=bgColor="yellow"><td><a href="#">FUCK</a></td></tr>
<tr bgColor=yellow onMouseOver=bgColor="orange" onMouseOut=bgColor="yellow"><td><a href="#">FUCK2</a></td></tr>
<tr bgColor=yellow onMouseOver=bgColor="orange" onMouseOut=bgColor="yellow"><td><a href="#">FUCK3</a></td></tr>
</table>
</span></td>

</tr>
</table>
</span></td>
</tr>
</table>
</body>
</html>