vertical drop down menu with 'sub drop downs' problem

[trdn1]

the page with my menu i'm working on is here:
http://www.fishingcamp.org/newmenu/vertmenu3.html

I am looking to make a vertical drop down menu with sub drop-downs for most selections.

if you mouseover the FC01-05, the drop down for that appears fine, then over FC01 and it disappears but the sub drop down now appears (FC01 img again for trial purposes).

the goal here is that as you mouse over FC01, the sub menu appears while leaving the host menu up, like you've probably seen around the web.

I've done some legwork on this, but can't seem to get anywhere with the ideas I've seen. Any help is greatly appreciated, and I'll definately embed your help in the code.

The script for this is:

var inmenu=false;
var lastmenu=0;
function Menu(current) {
if (!document.getElementById) return;
inmenu=true;
oldmenu=lastmenu;
lastmenu=current;
if (oldmenu) Erase(oldmenu);
m=document.getElementById("menu-" + current);
box=document.getElementById(current);
box.style.left= m.offsetLeft + m.offsetWidth + 2;
box.style.top= m.offsetTop;
box.style.visibility="visible";
m.style.backgroundColor="#2D6C0E";
box.style.backgroundColor="#2D6C0E";
box.style.width="100px";
}
function Erase(current) {
if (!document.getElementById) return;
if (inmenu && lastmenu==current) return;
m=document.getElementById("menu-" + current);
box=document.getElementById(current);
box.style.visibility="hidden";
m.style.backgroundColor="#2D6C0E";
}
function Timeout(current) {
inmenu=false;
window.setTimeout("Erase('" + current + "');",50);
}
function Highlight(menu,item) {
if (!document.getElementById) return;
inmenu=true;
lastmenu=menu;
obj=document.getElementById(item);
obj.style.backgroundColor="#2D6C0E";
}
function UnHighlight(menu,item) {
if (!document.getElementById) return;
Timeout(menu);
obj=document.getElementById(item);
obj.style.backgroundColor="#2D6C0E";
}

[ALL]

that's because you have:
(this is in the href)

onmouseover="swapon2(),Menu('sales')"

and:
(this is in the <div>)

onmouseover "Menu('xxx')"

what is happening is: you are hovering over the item to show the menu, but when they hover over the links in the <div> it automatically replaces the existing menu. try making each div their own.

but i am not that great at JavaScript

[trdn1]

thanks for the advice, i took a shot at the actual code and just ended the day frustrated...after walking the dog and some dinner, I decided to just include the 'sub-sub-menu' items with the sub menu. sometimes the simpler ideas are the hardest to come up with, but in the end I think it even works better.

the script as it was written, called for the sub menu on mouseover and displayed it. once mouseout, then it (the old menu) would close or time out. my attempt was to do that twice basically while keeping the root menu open...tough to explain, even tougher to code.


you can see how it ended up at
www.fishingcamp.org