Why I get slow load speed?

[dhayesEASI]

I know this is a shot in the dark, but let's give it a try. I am working an intranet site for the company I work for. I have a menu on the right with three different tabs. Each tab is a link to a different menu. Each one of those menus is a <div> tag. Now I have one of the <div> tags style.display set to "block" and all others set to "none". I change all of the style.display attributes via a javascript in a file which is being referenced. It doesn't seem to make a difference weither it is in the file or referenced. Files are structured as such:

[] = [folder]

1. [Site folder]/homepage.html
2. [Site folder]/[facility location]/facilityhomepage.html
3. [Site folder]/[product group]/productfamily.html
4. [Site folder]/[javascripts]/javascript.js

All pages are created using templates(not sure if this matters). My javascripts are in a seperate file (#4). Here is my problem. When I open the homepage (#1) no problem with speed on the right menu. I can tab through without any speed issues. When I access a facility (#2) I don't have any speed issues with the right menu. When I access a product group (#3) it starts to lag and you can see a real difference in the right menu as it loads the different menus. I can't see why I get this problem when 1 of the pages (#2) I don't have the problem with is buried under a folder like the one I am having a problem (#3). Any ideas?

[konithomimo]

Without seeing any code we can't really help you . . .

[dhayesEASI]

Here is the code for the menu:

<td id="menuRight">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="menuRightTab">
<table cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:RightMenu('crashcushions');"><img src="../images/product_crashcushion_sel.gif" border="0" name="crashcushion"></a></td>
</tr>
<tr>
<td><a href="javascript:RightMenu('specialtyproducts');"><img src="../images/product_specialty.gif" border="0" name="specialtyproduct"></a></td>
</tr>
<tr>
<td><a href="javascript:RightMenu('tmas');"><img src="../images/product_tma.gif" border="0" name="tma"></a></td>
</tr>
</table>
</td>
<td class="menuRight">
<div id="crashcushions" style="display:block">
<table cellpadding="0" cellspacing="0">
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
</table>
</div>
<div id="specialtyproducts" style="display:none">
<table cellpadding="0" cellspacing="0">
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
</table>
</div>
<div id="tmas" style="display:none">
<table cellpadding="0" cellspacing="0">
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/tma.html" class="menuItem">Menu Item</a></td>
</tr>
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
<tr>
<td id="menuRightItem" class="menuItem"><a href="../products/*.html" class="menuItem">Menu Item</a></td>
</tr>
</table>
</div>
</td>

Here is the javascript code:

function RightMenu(item) {
RightDiv=document.getElementsByTagName("DIV");
obj=document.getElementById(item);
visible=(obj.style.display=="none");
if (visible) {
i=4;
do {
RightDiv[i].style.display="none";
i++;
}
while (i<RightDiv.length);
obj.style.display="block";
}
}

Hope this helps.