Javascript menu positioning

Looks great in IE6, not so great in Safari and Firefox

[catcherintherye51]

I have a simple javascript menu that looks great in IE6, but in Firefox and Safari when you hover over the menu item the submenu appears all the way to the left.

Here's the important parts - I know it's a lot, but I wasn't sure what I needed to post:

//-----HERE"S THE MAIN MENU LINKS------
 <TBODY>
  <TR> 
   <TD width="110" height="23" align=middle noWrap bgcolor="#3165B5" class=n1a onmouseover="ShowMenu('f2eb3fb3'),this.className='drop-menu-current'" onmouseout=HideMenu(),this.className='drop-menu';> 
   <SPAN class=n1d id=_f2eb3fb3> About Us</SPAN></TD>
   <TD width="1"><img src="spacer" width="1" height="1"></TD>
   <TD width="110" align=middle noWrap bgcolor="#3165B5" class=n1a onmouseover="ShowMenu('b90adcf7'),this.className='drop-menu-current'" onmouseout=HideMenu(),this.className='drop-menu';> 
   <div align="center"><SPAN class=n1d id=_b90adcf7>Services 
   </SPAN></div></TD>
   <TD width="1"><img src="spacer" width="1" height="1"></TD>
   <TD width="110" align=middle noWrap bgcolor="#3165B5" class=n1a onmouseover="ShowMenu('d48e4faa'),this.className='drop-menu-current'" onmouseout=HideMenu(),this.className='drop-menu';> 
   <div align="center"><SPAN class=n1d id=_d48e4faa>Resource 
   Center</SPAN></div></TD>
   <TD width="1"><img src="spacer" width="1" height="1"></TD>
   <TD width="110" align=middle noWrap bgcolor="#3165B5" class=n1a onmouseover="this.className='drop-menu-current'" onclick="location.href='http://www.megaminds.com/'" onmouseout=HideMenu(),this.className='drop-menu';> 
   <div align="center"><SPAN class=n1d id=_ca6e81d1>Testimonials</SPAN></div></TD>
  </TR>
//-----HERE'S THE SUBMENU LINKS-----
<DIV id=b90adcf7 onmouseover="ShowMenu('b90adcf7')" style="LEFT: 268px; VISIBILITY: hidden; POSITION: absolute; TOP: 115px" onmouseout=HideMenu()> 
  <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
  <TBODY>
   <TR> 
   <TD bgColor=#FFFFFF> <TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
   <TBODY>
    <TR> 
    <TD class=drop-menu onmouseover="this.className='drop-menu-current'" onclick="location.href='http://www.mysite.com/'" onmouseout="this.className='drop-menu'">1-1 
    Tutoring </TD>
    </TR>
    <TR> 
    <TD class=drop-menu onmouseover="this.className='drop-menu-current'" onclick="location.href='http://www.mysite..com/'" onmouseout="this.className='drop-menu'">1-1 
    Test Prep </TD>
    </TR>
    <TR> 
    <TD class=drop-menu onmouseover="this.className='drop-menu-current'" onclick="location.href='http://www.mysite..com/'" onmouseout="this.className='drop-menu'">1-1 
    Guidance </TD>
    </TR>
    <TR> 
    <TD class=drop-menu onmouseover="this.className='drop-menu-current'" onclick="location.href='http://www.mysite..com/'" onmouseout="this.className='drop-menu'">1-1 
    Mentoring</TD>
    </TR>
   </TBODY>
   </TABLE></TD>
   </TR>
  </TBODY>
  </TABLE>
  </DIV>
//-------AND HERE'S THE STYLES-----
span.n1d {
 color: #FFFFFF;
 font-family: Arial,Verdana;
 font-size: 90%;
 font-weight: normal;
 cursor: pointer;
 text-decoration: none;
 
}
.over-menu-current {
 background-color: #3165B5;
 color: #FFFF00;
 cursor: pointer;
 font-family: Arial,Verdana;
 font-size: 90%;
 font-weight: normal;
}
.drop-menu {
 background-color: #3165B5;
 color: #FFFFFF;
 cursor: pointer;
 font: x-small Arial,Verdana;
}
.drop-menu-current {
 background-color: #003399;
 color: #FFFF00;
 cursor: pointer;
 font: x-small Arial,Verdana;
}
.n1a {
 color: #9C0606;
 font-family: Arial,Verdana;
 font-size: 80%;
 font-weight: normal;
 text-decoration: none;
}
//-----AND MORE JS-----
var openedMenu = '';
function ShowMenu(menuId)
{
HideMenu();
var el = document.all[menuId]
if (el) {
if(!el.flag) {
if(el.style.posLeft)
el.posLeft = document.all['_'+menuId].offsetParent.offsetLeft;
else
el.style.left = document.all['_'+menuId].offsetParent.offsetLeft;
el.flag = true;
}
el.style.visibility = 'visible';
}
openedMenu = menuId;
}
function HideMenu(menuId)
{
 if (openedMenu) if (document.all[openedMenu]) document.all[openedMenu].style.visibility = 'hidden';
}

This is my first time attempting these menus. Again, looks great in IE, but the submenus are aligning flush left in Firefox. If I change the position to releative instead of absolute, I get strange spacing under the menu.

Any ideas?

[rocknbil]

var el = document.all[menuId]

Without digging very deeply, this is possibly the root of your problem, - document.all is an old IE object. Try
document.getElementById(menuId) instead.

Then explore the documentation for offsetParent as well, it may have the same issues and you might want to use something more standard (if it's proprietary.) I'd have to look it up myself. :-D