How to dynamically set position for a component

How to dynamically set position for a component

I am trying to build this interface where there are icons and onmouseover, it displays menu choices for the corresponding. Instead of fixing the position of the menu box, is there a way to specify the left and top of that, relative to the icon that is being hovered? Here is part of my code:
  2. <table width="100%" style="">
  3.        <tr align="center">
  4.            <td>
  5.                <img id="imgHead1" src="images/ccd.ico" alt="Info Center" style="position:relative; border:1px solid black;" />
  6.                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  7.                <img id="imgHead2" src="images/back_label.gif" alt="Reports" style="position:relative;" />
  8.            </td>
  9.            <td>
  10.                
  11.            </td>
  12.        </tr>
  13.        <tr align="center">
  14.            <td>
  15.                <div id="imgH1div1" style="width:200px; height:50px;margin: 0px 0 0 0px; 
  16.                    border:1px solid gray; padding:20px; position:relative;left:98px;" >
  17.                    <a href="http://www.ccdsystems.com" ><img id="imgH1image1" src="images/B1.gif" alt="Create Event" /></a>
  18.                    <img id="imgH1image2" src="images/btnAdd.gif" alt="Remove Event" />
  19.                </div>
  20.                 
  21.                <div id="imgH2div1" style="width:200px; height:50px;margin: 0px 0 0 0px; 
  22.                    border:1px solid gray; padding:20px;position:relative;left:170px;" >
  23.                    <img id="imgH2image1" src="images/Chart_Pie.gif" alt="Create Event" />
  24.                    <img id="imgH2image2" src="images/Close_Button.gif" alt="Create Event" />
  25.                </div>
  26.            </td>
  27.        </tr>
  28. </table>
Thanks.