<table>
<thead>
<tr style="cursor:pointer">
<th onmouseover="$('sub1').appear();" onmouseout="$('sub1').fade();">Main 1</th>
<th onmouseover="$('sub2').appear();" onmouseout="$('sub2').fade();">Main 2</th>
<th onmouseover="$('sub3').appear();" onmouseout="$('sub3').fade();">Main 3</th>
</tr>
</thead>
<tbody>
<td colspan="3" height="15">
<div id="sub1" style="position:absolute;display:none">Sub1 Sub1 Sub1 </div>
<div id="sub2" style="position:absolute;display:none">Sub2 Sub2 Sub2 </div>
<div id="sub3" style="position:absolute;display:none">Sub3 Sub3 Sub3 </div>
</td>
</tbody>
</table>