Thomas: CSS: Text über die Feldgrenzen hinweg

Hallo!
http://ferien.lima-city.de/neu.html

Ich habe eine HTML-Seite und habe in dem blauen Bereich ein Menü eingebaut. Fährt man über den Menüpunkt 1 wird ein Untermenü sichtbar. Dies geschieht diesem JavaScript:

<script language="JavaScript">
<!--
function einblenden(was)
{

document.getElementById(was).style.visibility = "visible";
}

function ausblenden(was)
{
document.getElementById(was).style.visibility = "hidden";
}

//-->
</script>

Dieser Code ist das Menü selbst:
<div style="color:white; font-size:16px;">
<center>

<table border=1 width=100%>
<tr valign=top  align="left">
<td id="punkt1" width=20% onMouseOver="einblenden('unter1')" onMouseOut="ausblenden('unter1')">
Menüpunkt1

<div id="unter1">
hallo<br>
hallo<br>
hallo<br>
hallo<br>
hallo<br>
hallo<br>
</div>

</td>
<td>g</td>
<td>g</td>
<td>g</td>
<td>g</td>
</tr>
</table>

</center>
</div>

Das Problem: Das Menü soll weiter die ganze Breite des blauen Balkens (der Bereich ist eine Tabellenzelle) ausnutzen, die Menüs sollen immer noch genau unter dem Bereich bleiben und sie sollen außerdem in den gelben Bereich hineinragen, damit der blaue Bereich nicht zu groß wird.

Wie kann ich das realisieren?