Flyout menu from dynamic drive problems

[cadillacwd]

I grabbed this script from dynamicdrive "vertical menu flyout" it works fine in IE but not Mozzilla. It doesn't seem to calulate the x,y position correctly to place the dropmenudiv. It returns the same position from the getposOffset function no matter what menu you are hovering over. For example 192, wher ie gives different values and places the dropmenudiv in the correct location.

here is my HTML:

<ul class="avmenu">
<li><a class="current"  href="index.php">Home</a></li>
			
<li id="menu2" onmouseover="dropdownmenu(this, event, menu2, '165px')" onmouseout="delayhidemenu()"><a  href="education.php">Education</a></li>
			<li id="menu3" onmouseover="dropdownmenu(this, event, menu3, '165px')" onmouseout="delayhidemenu()"><a  href="news.php">News &amp; Calendar</a></li>
<li id="menu4" onmouseover="dropdownmenu(this, event, menu4, '165px')" onmouseout="delayhidemenu()"><a  href="contact.php">Contact</a></li>
<li id="menu5" onmouseover="dropdownmenu(this, event, menu5, '165px')" onmouseout="delayhidemenu()"><a  href="grants.php">Grants</a></li>
<li id="menu6" onmouseover="dropdownmenu(this, event, menu6, '165px')" onmouseout="delayhidemenu()"><a  href="member.php">Member info reports</a></li>
<li id="menu7" onmouseover="dropdownmenu(this, event, menu7, '165px')" onmouseout="delayhidemenu()"><a  href="#">Maine's Health Initiatives</a></li>
		</ul>

the Javascript is

/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="#">PW Sub-Menu 1</a>'
menu1[1]='<a href="#">PW Sub-Menu 2</a>'
menu1[2]='<a href="#">PW Sub-Menu 3</a>'


//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="#">Ed Sub-Menu 1</a>'
menu2[1]='<a href="#">Ed Sub-Menu 2</a>'
menu2[2]='<a href="#">Ed Sub-Menu 3</a>'

//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="#">N&C Sub-Menu 1</a>'
menu3[1]='<a href="#">N&C Sub-Menu 2</a>'
menu3[2]='<a href="#">N&C Sub-Menu 3</a>'

//Contents for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="#">Cont Sub-Menu 1</a>'
menu4[1]='<a href="#">Cont Sub-Menu 2</a>'
menu4[2]='<a href="#">Cont Sub-Menu 3</a>'

//Contents for menu 5, and so on
var menu5=new Array()
menu5[0]='<a href="#">Grant Sub-Menu 1</a>'
menu5[1]='<a href="#">Grant Sub-Menu 2</a>'
menu5[2]='<a href="#">Grant Sub-Menu 3</a>'

//Contents for menu 6, and so on
var menu6=new Array()
menu6[0]='<a href="#">Memb Sub-Menu 1</a>'
menu6[1]='<a href="#">Memb Sub-Menu 2</a>'
menu6[2]='<a href="#">Memb Sub-Menu 3</a>'

//Contents for menu 7, and so on
var menu7=new Array()
menu7[0]='<a href="#">MHI Sub-Menu 1</a>'
menu7[1]='<a href="#">MHI Sub-Menu 2</a>'
menu7[2]='<a href="#">MHI Sub-Menu 3</a>'


var disappeardelay=150  //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)

/////No further editting needed

var ie4=document.all;
var ns6=document.getElementById&&!document.all;

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>');

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj,"left")
dropmenuobj.y=getposOffset(obj,"top")
dropmenuobj.style.left=180+"px"  
/*dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"*/
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

[cadillacwd]

<li id="menu2" <a onmouseover="dropdownmenu(this, event, menu2, '165px')" onmouseout="delayhidemenu()" href="education.php">Education</a></li>

Just move the onmouseover and onmouseout event to the <a> tag!