Disappearing sub menu... :(

[QuackHead]

Hey, hopefully I can explain this properly...

I'm trying to make a navigation menu (similar to the dropdown style on microsoft.com for example) and I'm running into some problems.

here's my javascript:

<script language="javascript">
var browser = new checkBrowser();
var layer;
var menu;
var submenu;
var activeMenu = 'none';
var hideSubMenu = '';
var hideTheMenu = '';

function checkBrowser()
{
this.ver=navigator.appVersion ;
this.macos = this.ver.indexOf("Macintosh")> -1?1:0;
this.dom=document.getElementById?1:0 ;
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.browser=(this.ie5 || this.ie4 || this.ns4 || this.ns5 || this.ns6);
return this;
}
function setLayer(item,level)
{
//set the global variable to the layer being used...
if (level=='mItem')
{
layer=browser.dom?document.getElementById(item).style:browser.ie4?document.all[item].style:browser.ns4?nest?document[nest].document[item]:document[item]:0;
return layer;
}
else if (level=='menu')
{
menu=browser.dom?document.getElementById(item).style:browser.ie4?document.all[item].style:browser.ns4?nest?document[nest].document[item]:document[item]:0;
return menu;
}
else if (level=='subMenu')
{
submenu=browser.dom?document.getElementById(item).style:browser.ie4?document.all[item].style:browser.ns4?nest?document[nest].document[item]:document[item]:0;
return submenu;
}
}
// Menu highlight functions
function mOver(item)
{
setLayer(item,'mItem');
layer.backgroundColor = '#FF6600';
layer.cursor = 'pointer';
}
function mOut(item)
{
setLayer(item,'mItem');
layer.backgroundColor = '#062251';
layer.cursor = '';
}
// End highlight functions

function showMenu(item,level)
{
if (level=='menu')
{
if (activeMenu != 'none')
{
stopTimer();
killMenu(activeMenu);
}
setLayer(item,level);
menu.visibility='visible';
activeMenu = item;
}
else if (level=='subMenu')
{
setLayer(item,level);
submenu.visibility='visible';
}
}
function hideMenu(item,level)
{
setLayer(item,level);
if (level=='menu')
{
hideTheMenu = setTimeout("menu.visibility='hidden'", 500);
}
else if (level=='subMenu')
{
hideSubMenu = setTimeout("submenu.visibility='hidden'", 500);
}
}
function stopTimer(level)
{
if (level == 'subMenu'){
clearTimeout(hideSubMenu);
}
else{
clearTimeout(hideTheMenu);
}
}
function killMenu(item)
{
setLayer(item,'menu');
menu.visibility='hidden';
}
</script>


Here's the code that calls the menus...

<a href="#" onMouseOver="showMenu('Menu1','menu');" onMouseOut="hideMenu('Menu1');" onClick="return false;">Menu1</a>
.
.
.
<div id="Menu1" onMouseOver="stopTimer();" onMouseOut="hideMenu(this.id,'menu');">
<div class="Container">
<div id="Link1" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Link # 1
</div>
<div id="Link2" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Link # 2
</div>
<div id="Link3" class="MenuItem" onMouseOver="mOver(this.id); showMenu('SubMenu1','subMenu');" onMouseOut="mOut(this.id); hideMenu('SubMenu1','subMenu');">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td valign="top" nowrap>
<font class="small"><b>Link # 3</b></font><br>
</td><td valign="center" align="right">
<img src="arrow.gif" width="8" height="7"><br>
</td></tr>
</table>
</div>
</div>
</div>
<!-- SUB MENU -->
<div id="SubMenu1" onMouseOver="stopTimer('subMenu'); stopTimer();" onMouseOut="hideMenu(this.id,'subMenu');">
<div class="Container">
<div id="SM1" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Sub Menu Link # 1
</div>
<div id="SM2" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Sub Menu Link # 2
</div>
<div id="SM3" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Sub Menu Link # 3
</div>
<div id="SM4" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Sub Menu Link # 4
</div>
<div id="SM5" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Sub Menu Link # 5
</div>
<div id="SM6" class="MenuItem" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);">
Sub Menu Link # 6
</div>
</div>
</div>


Anways, the problem I'm having is that when you roll over the menu to display the 2nd level menu (Menu3 submenu) the sub menu will dissapear sometimes for no reason, and stay open if you roll your mouse over at just the right spot.

Can anyone help me with this?

If you need more clarification, please let me know...

Thanks alot

~Quack

[Roy Sinclair]

Your timeouts are getting to you. Going from Link2 to Link3 turns on the submenu for Link3 but then the timeout you set up turns off the submenu after .5 second.

[QuackHead]

Thanks Roy!

Actually, before I got your reply I had just figured out the error.

I started over and went backwards (Started by getting the submenu to work properly before the parent menus.)

Thanks for your reply.

I'll probably post my code later in case someone was wondering about the solution to this.

~Quack