I have a weird question (I think)

I am writing JavaScript to create drop-down menus for my site to use as a secondary navigation (there will be an alternative for non-JS users) but I have run into a problem. I have a table with 2 rows, the first row has the menus and the second row has some DIV layers with the menu content.
PHP Code:
<tr>
        <
td width='20%' align='center' class='menu'>Menu >></td>
        <
td id='menu1' width='20%' align='center' class='menu' onMouseOver="showMenu(this, 'menupane1')" onMouseOut="hideMenu(this, 'menupane1')">Menu 1</td>
        <
td id='menu2' width='20%' align='center' class='menu' onMouseOver="showMenu(this, 'menupane2')" onMouseOut="hideMenu(this, 'menupane2')">Menu 2</td>
        <
td id='menu3' width='20%' align='center' class='menu' onMouseOver="showMenu(this, 'menupane3')" onMouseOut="hideMenu(this, 'menupane3')">Menu 3</td>
        <
td id='menu4' width='20%' align='center' class='menu' onMouseOver="showMenu(this, 'menupane4')" onMouseOut="hideMenu(this, 'menupane4')">Menu 4</td>
    </
tr>
    <
tr>
        <
td></td>
        <
td id='menupane1'></td>
        <
td id='menupane2'></td>
        <
td id='menupane3'></td>
        <
td id='menupane4'></td>
    </
tr
I originally didn't use position CSS but when the menu appeared it pushed my page content down so I added position: absolute to my DIV style attribute and now nothing else in the style attribute works. The text-align or colors are gone. Here is the DIV
PHP Code:
<div align='center' valign='top' style='position: absolute; top: " + bottom + "; left: " + left + "; width: " + 
                                                   menu.style.width + "; height: 120px; z-index: 1'
><b>Menu</b><br /><br />Hello :)</div
Any ideas?? I'm completely lost since when I remove the position bit it all works fine.