Premature event firing

I have a menu system which pops up a submenu when the mouse hovers over a menu item. It dynamically creates a div for the submenu, and removes it when the mouse the submenu, or the main menu item which spawned it. All good so far.

Nearly there. But what I’m finding now is that the submenu closes when the mouse leaves one of the hyperlinks in the submenu, instead of closing only when the mouse leaves the enclosing div. Why is it doing this? I think I’m going to cry…

The code is below. You can see it in action at [url]http://www.aocd00.dsl.pipex.com/menu.htm[/url]

(btw I’ve got my reasons for not doing this with css so please no suggestions along those lines ? )

[code]

<script>
var inSubMenu = new Array();
function openMenu(oMenu)
{
var mainMenu = oMenu;
var subMenu = document.createElement(“div”);mainMenu.appendChild(subMenu);
subMenu.className=’subMenu’;
subMenu.id=’submenu’+oMenu.id;
var mouseoutfunction = function() {oMenu.removeChild(this);};
subMenu.onmouseout=mouseoutfunction;
var sublist = cats[oMenu.id];
//for each subcat
//create link
//set href
//set inner text
//add to sub
for(var catid in sublist)
{
var link = document.createElement(‘a’);
link.href= ‘/products/category.php?catid=’+oMenu.id;
link.appendChild(document.createTextNode(sublist[catid]));
subMenu.appendChild(link);
}
}
function leaveMenu (oMenu)
{
var timeoutFunc = function () { oMenu.removeChild(oMenu.lastChild);};
window.setTimeout(timeoutFunc, 10);
}
</script>
<div id=”menuItem” style=”position:relative; right:-50%” >
<strong>Categories A-Z</strong>
<script>
var cats = new Array();
cats[195] = new Array(‘Chemical Absorbents’,’General Purpose Absorbents’,’Oil Only Absorbents’,’Spill Kits’);
inSubMenu[195] = false
cats[223] = new Array(‘Analysis ruled pad’,’Analysis ruled paper’,’General Trader/VAT book’,’Halfbound account book’,’Postage & Delivery book’,’Standard account book’,’Standard Analysis Book’,’Wage & S.S.P book’);
inSubMenu[223] = false
cats[224] = new Array(‘Adhesives & Coverings’,’All Purpose adhesive’,’Dry adhesive’,’Glue Roller/Refill’,’Glue Stick/Gluepen’,’Paste/Smooth’);
inSubMenu[224] = false
cats[183] = new Array(‘ Air Purifiers’,’ Air Purifiers Mounted’);
inSubMenu[183] = false
</script>
<div id=”223″ style=”position:relative” onmouseover=”openMenu(this)” onmouseout=”leaveMenu(this)”>
<a name=”Accounting Book/Pa…” href=”../products/category.php?catid=223″>&nbsp;<&nbsp;Accounting Book/Pa…</a>
</div>
<div id=”224″ style=”position:relative” onmouseover=”openMenu(this)” onmouseout=”leaveMenu(this)”>
<a name=”Adhesives” href=”../products/category.php?catid=224″>&nbsp;<&nbsp;Adhesives</a></div>
<div id=”183″ style=”position:relative” onmouseover=”openMenu(this)” onmouseout=”leaveMenu(this)”>
<a name=”Air Conditioners” href=”../products/category.php?catid=183″>&nbsp;<&nbsp;Air Conditioners</a>
</div>
</div><style>
#menuItem {
width:150px;
color: black;
text-align:center;
background-color:White;
border: solid 1px #3B5263;
padding:0px;
position: relative;
}
#menuItem a {
width: 150px;
font: normal 8pt Verdana;
color: black;
text-decoration: none;
text-align:left;
display:block;
border: solid 1px #547A98;
background-color: #DEE6EC;
padding:0px;
}
#menuItem a:hover {
color: orange;
text-decoration: none;
display:block;
border-top: solid 1px #547A98;
background-color: WHITE;
}
.subMenu {
width:150px;
color: black;
overflow:auto;
text-align:center;
background-color:White;
border: solid 1px #3B5263;
padding:0px;
position: absolute;
right:100%;
top:0%;
overflow: hidden;
}
</style>
[/code]

Also in #JavaScript _↴