<style type="text/css">
*{margin:0 auto;padding:0 auto;}
td{width:100px;height:30px;background:#f1f2f3;text-align:center;position:relative}
.aa{position:absolute;top:0px;left:100px;display:none;}
</style>
<script language="javascript">
function aa_1(b,a){
b.style.background="#d1d2d3"
eval("document.getElementById('a_"+a+"').style.display='block'")
}
function aa_2(b,a){
b.style.background="#f1f2f3"
eval("document.getElementById('a_"+a+"').style.display='none'")
}
function bb_1(a){
a.style.background="#d1d2d3"
}
function bb_2(a){
a.style.background="#f1f2f3"
}
</script>
<table>
<tr><td onmouseover="aa_1(this,1)" onmouseout="aa_2(this,1)">a<table class="aa" id="a_1">
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">e</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">f</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">g</td></tr>
</table>
</td></tr>
<tr><td onmouseover="aa_1(this,2)" onmouseout="aa_2(this,2)">b<table class="aa" id="a_2">
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">e</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">f</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">g</td></tr>
</table>
</td></tr>
<tr><td onmouseover="aa_1(this,3)" onmouseout="aa_2(this,3)">c<table class="aa" id="a_3">
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">e</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">f</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">g</td></tr>
</table>
</td></tr>
<tr><td onmouseover="aa_1(this,4)" onmouseout="aa_2(this,4)">d<table class="aa" id="a_4">
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">e</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">f</td></tr>
<tr><td onmouseover="bb_1(this)" onmouseout="bb_2(this)">g</td></tr>
</table>
</td></tr>
</table>