为什么不能实现动画切换效果啊
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.pro li{list-style:none; width:80px;background:gray;float:left;margin-right:1px;}
.pro li ul{padding:0;display:none;height:0;position:absolute;overflow:hidden;}
</style>
<script>
window.onload=function()
{
var lis=document.getElementsByTagName("li");
for(i=0;i<lis.length;i++)
{
lis[i].onmouseover=function()
{
u=this.getElementsByTagName("ul")[0];
if(u!=undefined)
{
u.style.display="block";
zhan(u.id);
}
}
lis[i].onmouseleave=function()
{
u=this.getElementsByTagName("ul")[0];
if(u!=undefined)
{shou(u.id);}
}
}
}
function zhan(id)
{
var seli=document.getElementsById(id);
var h=seli.offsetHeight;
h=h+1;
if(h<=40)
{
seli.style.height=h+"px";
setTimeout("zhan('"+id+"')",10);
}
else{return;}
}
function shou(id)
{
var seli=document.getElementsById(id);
var h=seli.offsetHeight;
h=h-1;
if(h>0)
{
seli.style.height=h+"px";
setTimeout("shou('"+id+"')",10);
}
else
{
seli.style.display="none";
return;
}
}
</script>
</head>
<body>
<ul class="pro">
<li>天津
<ul id="tj">
<li>南开</li>
<li>天大</li>
</ul>
</li>
<li>广东
<ul id="gd">
<li>中山</li>
<li>华理</li>
</ul>
</li>
<li>四川
</li>
</ul>
</body>
</html>
