Problem facing with nested menus

I am facing problem with javascript nested menus. I am able to get 1st menus successfully. But not the second level (For Ex. When mouse is placed on Query, I am not getting Create Query, Modify Query, ... etc.). Can somebody tell me where I am doing mistake? Here the code I am using. Please see the next message to get the complete code.

var MFL = 0; // MENU DISTANCE FROM EDGE
var MFT = 24; // MENU DISTANCE FROM TOP
var ALIGN = "left"; // MENU LEFT OR RIGHT
var TMH = 22; // TOP MENU HEIGHT
var TMFS = "8"; // TOP MENU FONT SIZE
var TMFW = "bold"; // TOP MENU FONT WEIGHT bold/normal
var TMFF = " arial, verdana, helvetica, sans"; // TOP MENU FONT FACE
var TMC = "DFCFDC"; // TOP MENU OFF FONT COLOR
var TMBC = "311028"; // TOP MENU OFF BACKGROUND COLOR
var TMBI = "picts/menu.gif"; // TOP MENU OFF BACKGROUND IMAGE
var TMHC = "000000"; // TOP MENU HOVER TEXT COLOR
var TMHBC = "C0C0C0"; // TOP MENU HOVER BACKGROUND COLOR
var TMHBI = "picts/menuon.gif"; // TOP MENU HOVER BACKGROUND IMAGE
var MO = TMH-2; // Y MENU OVERLAP CHANGE NUMBER VALUE
var SUBshift = 0; // SHIFT SUBMENU RIGHT

// START SUBMENU OPTIONS - you will find more options in the corporatestyle.css

var SMH = 20; // SUB MENU HEIGHT
var SMFS = "8"; // SUB MENU FONT SIZE
var SMFW = "normal"; // SUB MENU FONT WEIGHT bold/normal
var SMFF = "arial,MS Sans Serif,sans-serif"; // SUB MENU FONT FACE
var SMC = "333333"; // SUB MENU OFF FONT COLOR
var SMBC = "FFFFFF"; // SUB MENU OFF BACKGROUND COLOR
var SMHC = "FFFFFF"; // SUB MENU HOVER TEXT COLOR
var SMHBC = "999999"; // SUB MENU HOVER BACKGROUND COLOR

// Menu data structure
function MenuArray() {
this.link = new Array();
this.text = new Array();
this.target = new Array();
this.parent = new Array();
this.id = new Array();
this.length = 0;
this.addMenuDetails = function (l, t, tg, p, mid) {
this.link[this.length] = l;
this.text[this.length] = t;
this.target[this.length] = tg;
this.parent[this.length] = p;
this.id[this.length] = mid;
this.length++;
}
}

var mArr = new MenuArray();
mArr.addMenuDetails("", "Personalize", "", -1, "0"); // 0
mArr.addMenuDetails("", "Queries & Reports", "", -1, "1"); // 1
mArr.addMenuDetails("", "Reviews", "", -1, "2"); // 2
mArr.addMenuDetails("", "Administration", "", -1, "3"); // 3
mArr.addMenuDetails("", "Help", "", -1, "4"); // 4
mArr.addMenuDetails("logout.html", "Logout", "", -1, "5"); // 5
mArr.addMenuDetails("cprofile.html", "Change Profile", "", 0, ""); // 6
mArr.addMenuDetails("cpasswd.html", "Change Password", "", 0, ""); // 7
mArr.addMenuDetails("", "Query", "", 1, "6"); // 8
mArr.addMenuDetails("", "Report", "", 1, "7"); // 9
mArr.addMenuDetails("areviews.html", "My Active Reviews", "", 2, ""); // 10
mArr.addMenuDetails("planreview.html", "Plan a Review", "", 2, ""); // 11
mArr.addMenuDetails("items.html", "Manage Review Items", "", 2, ""); // 12
mArr.addMenuDetails("", "Project Administration", "", 3, "8"); //13
mArr.addMenuDetails("", "qTools Administration", "", 3, "9"); // 14
mArr.addMenuDetails("overview.html", "qTools Overview", "_blank", 4, ""); // 15
mArr.addMenuDetails("about.html", "About qTools", "_blank", 4, ""); // 16
mArr.addMenuDetails("cquery.html", "Create Query", "", 8, ""); // 17
mArr.addMenuDetails("mquery.html", "Modify Query", "", 8, ""); // 18
mArr.addMenuDetails("rquery.html", "Run Query", "", 8, ""); // 19
mArr.addMenuDetails("creport.html", "Create Report", "", 9, ""); // 20
mArr.addMenuDetails("mreport.html", "Modify Report", "", 9, ""); // 21
mArr.addMenuDetails("rreport.html", "Run Report", "", 9, ""); // 22
mArr.addMenuDetails("projusers.html", "Project Users", "", 13, ""); // 23
mArr.addMenuDetails("areviews.html", "Reviews", "", 13, ""); // 24
mArr.addMenuDetails("aitems.html", "Review Items", "", 13, ""); // 25
mArr.addMenuDetails("users.html", "Users", "", 14, ""); // 26
mArr.addMenuDetails("products.html", "Products", "", 14, ""); // 27
mArr.addMenuDetails("projects.html", "Projects", "", 14, ""); // 28
mArr.addMenuDetails("components.html", "Components", "", 14, ""); // 29

var Sub_Menu_Width=new Array();
var Top_Width=new Array();
Top_Width[0]=125;
Sub_Menu_Width[0]=150;
Top_Width[1]=125;
Sub_Menu_Width[1]=150;
Top_Width[2]=125;
Sub_Menu_Width[2]=150;
Top_Width[3]=125;
Sub_Menu_Width[3]=150;
Top_Width[4]=150;
Sub_Menu_Width[4]=175;
Top_Width[5]=150;
Sub_Menu_Width[5]=175;

// IF YOU ADD ANOTHER TOP LEVEL MENU YOU MUST ADD TO THE BOTTOM OF THIS LIST

var ADJ=new Array();
ADJ[0]=MFL;
ADJ[1]=(Top_Width[0])+MFL;
ADJ[2]=(Top_Width[0]+Top_Width[1])+MFL;
ADJ[3]=(Top_Width[0]+Top_Width[1]+Top_Width[2])+MFL;
ADJ[4]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3])+MFL;
ADJ[5]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3]+Top_Width[4])+MFL;
ADJ[6]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3]+Top_Width[4]+Top_Width[5])+MFL;

// Detect the browser and version
var browser_version = parseInt(navigator.appVersion);
var browser_type = navigator.appName;

var BWD=new DETECT();

var spn;
var l;
var r;
var c;
var lf;
var fc;

StartMenu();

SubMenu();

// START WRITING TOP LEVEL MENUS
var topMenu = GetParentArray(-1);
for (var i=0; i < topMenu.length; i++) {
document.write("<div style='position:absolute;"+ALIGN+":"+ADJ[i]+";top:"+MFT+";width:"+Top_Width[i]+"' onmouseover='o["+i+"].ShowMenu()' onmouseout='o["+i+"].HideMenu()'>");
if (browser_type == "Netscape") {
if (mArr.link[topMenu[i]] == "") {
document.write("<font class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"'>"+mArr.text[topMenu[i]]+"</font>");
} else {
document.write("<a class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"' href='"+mArr.link[topMenu[i]]+"'>"+mArr.text[topMenu[i]]+"</a>");
}
} else {
if (mArr.link[topMenu[i]] == "") {
document.write("<font class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"' onmouseover=\"this.style.backgroundColor='#"+TMHBC+"';this.style.color='"+TMHC+"';this.style.backgroundImage='URL("+TMHBI+")'\" onmouseout=\"this.style.backgroundColor='#"+TMBC+"';this.style.color='"+TMC+"';this.style.backgroundImage='URL("+TMBI+")'\">"+mArr.text[topMenu[i]]+"</font>");
} else {
document.write("<a class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"' onmouseover=\"this.style.backgroundColor='#"+TMHBC+"';this.style.color='"+TMHC+"';this.style.backgroundImage='URL("+TMHBI+")'\" onmouseout=\"this.style.backgroundColor='#"+TMBC+"';this.style.color='"+TMC+"';this.style.backgroundImage='URL("+TMBI+")'\" href='"+mArr.link[topMenu[i]]+"'>"+mArr.text[topMenu[i]]+"</a>");
}
}
document.write("</div>");
}

// START WRITING SUB MENUS
for (i=0; i < topMenu.length; i++) {
var subMenu = GetParentArray(topMenu[i]);
if (subMenu.length > 0) {
document.write("<div id='SUB"+mArr.id[topMenu[i]]+"' class='menu_DIV' style='position: absolute; "+ALIGN+":"+(ADJ[i]+SUBshift)+";top:"+(MFT+MO)+";width:"+Sub_Menu_Width[i]+";background-color:#"+SMBC+";' onmouseover='o["+i+"].ShowMenu()' onmouseout='o["+i+"].HideMenu()'>");
var s = "";
for (var j = 0; j < subMenu.length; j++) {
if (mArr.link[subMenu[j]] == "") {
s += "<div onmouseover='o["+mArr.id[subMenu[j]]+"].ShowMenu()' onmouseout='o["+mArr.id[subMenu[j]]+"].HideMenu()'>" + lf + mArr.text[subMenu[j]] + fc + "</div>";
s += "<div id='SUB"+mArr.id[subMenu[j]]+"' class='menu_DIV' style='position: absolute; "+ALIGN+":"+(ADJ[i]+SUBshift)+";top:"+(MFT+MO)+";width:"+Sub_Menu_Width[i]+";background-color:#"+SMBC+";' onmouseover='o["+mArr.id[subMenu[j]]+"].ShowMenu()' onmouseout='o["+mArr.id[subMenu[j]]+"].HideMenu()'>";
var subSub = GetParentArray(subMenu[j]);
for (var si = 0; si < subSub.length; si++) {
s += l + mArr.link[subSub[si]] + r + mArr.text[subSub[si]] + c;
}
s += "</div>";
} else {
s += l + mArr.link[subMenu[j]] + r + mArr.text[subMenu[j]] + c;
}
}
document.write(s);
} else {
document.write("<div id='SUB"+mArr.id[topMenu[i]]+"'>");
}
document.write("</div>");
}

function StartMenu() {
if(BWD.ie) {
spn=" width: 100%";
} else {
spn="";
}
}

function SubMenu() {
document.write("<table cellpadding='0' cellspacing='0' border='0' width='100%' BGCOLOR='#242440'><tr><td>");
document.write("<img src='picts/spacer.gif' width='100%' height='"+TMH+"'><br>");
document.write("</td></tr></table>");

document.write("<div width='100%' style='height:"+TMH+";position:absolute;top:"+MFT+";width:100%;background-image: url("+TMBI+"); background-color:#"+TMBC+";z-level:-2'></div>");

browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;
if (browser_type == "Netscape") {
l="<a class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"' href='";
lf="<font class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"'>";
} else {
l="<a class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"' onmouseover=\"this.style.backgroundColor='#"+SMHBC+"';this.style.color='"+SMHC+"'\" onmouseout=\"this.style.backgroundColor='#"+SMBC+"';this.style.color='"+SMC+"'\" href='";
lf="<font class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"' onmouseover=\"this.style.backgroundColor='#"+SMHBC+"';this.style.color='"+SMHC+"'\" onmouseout=\"this.style.backgroundColor='#"+SMBC+"';this.style.color='"+SMC+"'\">";
}
r="'>";
c="</a>";
fc="</font>";
}

function GetParentArray (parid) {
var parArr = new Array();
var j = 0;
for (var i = 0; i < mArr.length; i++) {
if (mArr.parent[i] == parid) {
parArr[j++] = i;
}
}
return parArr;
}

function DETECT() {
this.ver = navigator.appVersion;
this.agent = navigator.userAgent;
this.dom = document.getElementById?1:0;
this.opera5 = this.agent.indexOf("Opera 5")>-1;
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6;
this.mac=this.agent.indexOf("Mac")>-1;
this.ns6=(this.dom && parseInt(this.ver)>=5)?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.BWD=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5);
return this;
}

function lib_obj(obj,nest) {
nest=(!nest) ? "":'document.'+nest+'.';
this.evnt=BWD.dom? document.getElementById(obj):BWD.ie4?document.all[obj]:BWD.ns4?eval(nest+"document.layers." +obj):0;
this.css=BWD.dom||BWD.ie4?this.evnt.style:this.evnt;
this.ref=BWD.dom||BWD.ie4?document:this.css.document;
this.x=parseInt(this.css.top)||this.css.pixeltop||this.evnt.offsettop||0;
this.y=parseInt(this.css.left)||this.css.pixelleft||this.evnt.offsetleft||0;
return this
}

lib_obj.prototype.ShowMenu = function() {
this.css.visibility="visible"
}

lib_obj.prototype.HideMenu = function() {
this.css.visibility="hidden"
}

function libinit() {
var j = 0;
for (var i=0; i < mArr.id.length; i++) {
if (mArr.id[i] != "") {
o[j]=new lib_obj("SUB" + mArr.id[i]);
o[j].HideMenu();
j++;
}
}
}

var o = new Array();
libinit();

Can somebody tell me where I am doing mistake?Your first mistake is using Javascript to create a menu. Your second is not posting your code inside code tags (www.codingforums.com/misc.php?do=bbcode#code). Your third mistake is not posting something to show us what it's suppose to look like or how it's suppose to work.

Please find the complete source code at

http://www.geocities.com/svgkraju/subMenu.html

Save the html source and remove contents before <html> and after </html> tags.

regds
-raju

When mouse is placed over Queries & Reports I am getting Query and Report submenu. But when mouse is placed over Query, I am not getting the submenu with "Create Query, Modify Query, Run Query" sub sub menu.
regds
-raju

A CSS problem, not a javascript one.

In the styling for menu_DIV, remove filter:alpha(opacity=100);

Take this code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>57438</title>
</head>
<body>
<ul id="nav">
<li>
<a href="">Personalise</a>
<ul>
<li><a href="">Change profile</a></li>
<li><a href="">Change password</a></li>
</ul>
</li>
<li>
<a href="">Queries &amp; Reports</a>
<ul>
<li>
<a href="">Query</a>
<ul>
<li><a href="">Create query</a></li>
<li><a href="">Modify query</a></li>
<li><a href="">Run query</a></li>
</ul>
</li>
<li>
<a href="">Report</a>
<ul>
<li><a href="">Create report</a></li>
<li><a href="">Modify report</a></li>
<li><a href="">Run report</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Reviews</a>
<ul>
<li><a href="">My active reviews</a></li>
<li><a href="">Plan a review</a></li>
<li><a href="">Manage review items</a></li>
</ul>
</li>
<li>
<a href="">Administration</a>
<ul>
<li>
<a href="">Project administration</a>
<ul>
<li><a href="">Project users</a></li>
<li><a href="">Reviews</a></li>
<li><a href="">Review items</a></li>
</ul>
</li>
<li>
<a href="">qTools administration</a>
<ul>
<li><a href="">Users</a></li>
<li><a href="">Products</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Components</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Help</a>
<ul>
<li><a href="">qTools overview</a></li>
<li><a href="">About qTools</a></li>
</ul>
</li>
<li><a href="">Logout</a></li>
</ul>
</body>
</html>and use the Suckerfish (http://www.htmldog.com/articles/suckerfish/) methods to turn it into a menu.