Hi,

I need help implementing onMouseOut hide submenu for the following menu script that another expert(Lisa) has helped me implement.

Right now she has implemented onClick hide, but I tried to implement onMouseOut but it seems not to work.

here is the code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<Script language='JavaScript'>
function SubMenu(Cell){
switch (Cell)
{
case "S0":{
var elem = document.getElementById("S1");
elem.style.visibility = 'hidden'

}
break
case "S1":{
var parent = document.getElementById("T1");
var x = getRealLeft(parent);
var y = getRealTop(parent);

var elem = document.getElementById("S1");
elem.style.position = "absolute";
elem.style.left = x + 151; //width attribute of parent menu table + 1
elem.style.top = y;
elem.style.visibility = 'visible'

}
break

}
}

function HideSub()
{
SubMenu("S0");
return true;
}

window.onclick=HideSub;
document.onclick=HideSub;

</Script>

</HEAD>
<body>

<P>

<script language="javascript">
//// FUNCTIONS TO POPUP AND SWAP MENU ITEMS
function Hide(Cell){
Cell.style.visibility = "hidden"
}
function Show(Cell)
{
Cell.style.visibility = "visible"
}

function Swap(Cell){
//alert("Swap" + Cell.id);
switch (Cell.style.color){
case "":
{
Cell.style.color="white"
Cell.style.background="steelblue"
}
break
case "white":
{
Cell.style.color=""
Cell.style.background="whitesmoke"
}
break
default:
Cell.style.visibility = "hidden"
}
}

function NavTo(Loc){
window.location = Loc
}

function getRealLeft(el) {
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}

function getRealTop(el) {
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}


</script>

<TABLE onMouseOver=SubMenu('S1');Swap(this) onMouseOut=Swap(this) class='Menu' id='T1'
style='Z-INDEX: 1;' cellSpacing='0' cellPadding='3' width='150' height='20' border='0'>
<TR>
<TD title='Menu 1'>Menu 1</TD>
</TR>
</TABLE>
<TABLE class='SubMenu' id='S1' style='visibility: hidden; Z-INDEX: 2;cellSpacing='0' cellPadding='3' width='150' border='0'>
<TR>
<TD title='SubMenu 1-2' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-2</TD>
</TR>
<TR>
<TR>
<TD title='SubMenu 1-3' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-3</TD>
</TR>
<TR>
<TR>
<TD title='SubMenu 1-4' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-4</TD>
</TR>
<TR>
<TR>
<TD title='SubMenu 1-5' height='20'onMouseOver=Swap(this) onMouseOut=Swap(this) width='100%' onClick=NavTo('index.aspx')>SubMenu 1-5</TD>
</TR>
</TABLE>


</body>
</HTML>