就是鼠标的onmouseover和onmouseout配合div就行了~~

这样的效果直接 在网页里 右键查看原代码 找出那段代码试试就OK了：）

<style type="text/css">
.aa{
position:relative;}
td{font-size:20px;height:30px;}

#g1{display:none;
position:absolute;
top:32px;left:4px;
}

#g2{display:none;
position:absolute;
top:32px;left:203px;
}
#g3{display:none;
position:absolute;
top:32px;left:402px;
}
</style>

<table width="600" class="aa" align="center" bgcolor="red" border="1"><tr align="center">
<td width="200" onmouseover="ha(1)" onmouseout="haa(1)">
aaaa
<table width="100%" id="g1" width="200" bgcolor="red"><tr><td>aabb</td></tr><tr><td>aeee</td></tr></table>
</td>

<td width="200" onmouseover="ha(2)" onmouseout="haa(2)">
aaaa
<table width="100%" id="g2" width="200" bgcolor="red"><tr><td>34244</td></tr><tr><td>34244</td></tr><tr><td>34244</td></tr></table>
</td>

<td width="200" onmouseover="ha(3)" onmouseout="haa(3)">
aaaa
<table width="100%" id="g3" width="200" bgcolor="red"><tr><td>ttwet4</td></tr><tr><td>34244</td></tr><tr><td>34244</td></tr></table>
</td>

</tr></table>
<table width="800" height="300" align="center" border="1" bgcolor="#dsdsds"><tr><td></td></tr></table>
<script language="javascript">
function ha(a){
eval("document.getElementById('g"+a+"').style.display='block'")
}

function haa(a){eval("document.getElementById('g"+a+"').style.display='none'")}
</script>