using css to change position of a table

using css to change position of a table

hi,

i have this table on my html page:

<table id="t_menu_options" width="125" border="1" cellspacing="0" bordercolor="#F9F9F9">
  <tr>
    <td colspan="2"><font size="-2" face="Verdana"><strong>Options...</strong></font></td>
  </tr>
  <tr>
    <td width="15%">&gt;</td>
    <span id="edit"><td><font size="-2" face="Verdana"><span id="et">Edit</span></font></td></span>
  </tr>
  <tr>
    <td width="15%">&gt;</td>
    <span id="delete"><td><font size="-2" face="Verdana"><span id="dt">Delete</span></font></td></span>
  </tr>
</table>


i start the page by hiding the above html by using

$('#t_menu_options').hide();


and that works.

now upon some user mouseclick event, i want to show the html and move it to a position where the user clicked:

function showTaskOptionsMenu(e) {
      alert(e.pageX+" "+e.pageY);
$('#t_menu_options').css({'left':e.pageX+'px','top':e.pageY+'px'}).show();
}


the alert command works as expected. however, the html is simply showed at the bottom of the page and is not moved to the desired location. what is the issue? this has been bugging me for hours...

thanks in advance.