Drop down menu slows page load

[hessodreamy]

I have built a drop down menu so that a sub-menu appears when you hover over the main menu item etc.
However there's quite a lot of sub menus to deal with, and the page now takes a stupid amout of time to load. At first I thought it was due to too much reading from the db, but then I copied the generated html for the menu into an include file and that didn't speed things up at all.
A code snippet is listed below. Is there any way to speed this up? or take action only when the rest of the page has loaded? I could use frames, but would prefer not to.
Cheers

<script> 
var lastOpened = null; 
var mouseInMenu = false; 
function expandSub(menuItem) 
{ 
//register that mouse is in menu item; 
mouseInMenu = true; 
//make relevant element visible 
var subm = document.getElementById(menuItem+"SubMenu"); 
subm.style.visibility="visible"; 
//hide last opened element and register this one as last opened 
collapseSubMenu(); 
lastOpened = subm; 
} 
function collapseSubMenu() 
{ 
if (lastOpened!= null) lastOpened.style.visibility = "hidden"; 
} 
function leaveMenu() 
{ 
mouseInMenu = false; 
window.setTimeout("if(mouseInMenu==false) collapseSubMenu();", 20); 
} 
function mousein() 
{ 
 mouseInMenu= true; 
} 
</script> 
<div id="menuItem" > 
<strong>Categories A-Z</strong> 
<?php 
$sql = mysql_query("SELECT catId, catName FROM categories ORDER BY catName LIMIT 10", $dbh); 
while ($rec = mysql_fetch_array($sql)) 
 { 
 $menucatname = $rec["catName"]; 
 if (strlen($menucatname) > 22 ) $menucatname = substr($menucatname,0,18) . "..." ; 
 $cat_href = $linkprefix . "products/category.php?catid=" . $rec["catId"]; 
 echo "<div style=\"position:relative\">"; 
 echo "<a name=\"" . $menucatname . "\" href=\"" . $cat_href . "\" onmouseover=\"expandSub(name)\" onmouseout=\"leaveMenu()\">&nbsp;<&nbsp;" . $menucatname . "</a>"; 
 //perform 2nd query to get sub category 
 $subCatSqlStr = "SELECT s.subCatName, s.subCatId FROM subCategories s, cat_subCat l WHERE l.relSubCatId = s.subCatId AND l.relCatId = " . $rec["catId"] . " ORDER BY s.subCatName"; 
 $subCatSql = mysql_query($subCatSqlStr, $dbh); 
 if (mysql_num_rows($subCatSql) > 0) 
 {echo "<div id=\"" . $menucatname."SubMenu" . "\" class=\"subMenu\" style=\"visibility:hidden;\" onmouseover=\"mouseInMenu=true\"onmouseout=\"leaveMenu()\">"; 
while ($subCatRec = mysql_fetch_array($subCatSql)) 
//for each related subcategory, append link to submenu 
{ 
 $subCatName = $subCatRec["subCatName"]; 
 if ( strlen($subCatName) > 22 ) $subCatName = substr($subCatName,0,18) . "..." ; 
 $subCatId = $subCatRec["subCatId"]; 
 echo "<a name=\"". $subCatName . "\" href=\"" . $cat_href . "\">" . $subCatName . "</a>"; 
} 
echo "</div>"; 
} 
echo "</div>"; 
} 
?> 
</div> 

[ergophobe]

but then I copied the generated html for the menu into an include file and that didn't speed things up at all.

Then it either isn't a PHP problem or it isn't a problem with the menu, but with something else in another part of the script.

Is it possible that it's just simply that big and what you're seeing is simply the time to render the page?

[hessodreamy]

That's what I figured - but would like to find a way to make it faster.