[SOLVED] Drop Down Menu Position Problem

[centerwork]

I have been at this for the last couple of hours to no avail. The problem is that when you scroll the page the menu bar moves too.

 

From what I have figured it the css there are three position that need adjusting. They are #mB, .mH, and .mD.

 

#mB - is the bar its self.

 

.mH - I am not quite sure.

 

.mD - is the dropdown menu.

 

Bellow are the three files for this menu. First the CSS. Then the Java script, and lastly the html page.

 

body {
margin:0px;
padding:0px;
background-color:#CCCCCC;
font:arial,Helvetica,sans-serif;
}
#mB {
font:bold small arial,Helvetica,sans-serif;
text-align:center;
margin-top:5px;
margin-bottom:5px;
position:relative;
top:0px;
left:0px;
width:99%;
overflow:hidden;
border:solid 1px #015067;
background-color:#015067;
z-index:1000;
}
.mH {
color:#ffffff;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
padding:5px;
margin:0px;
padding-right:10px;
position:relative;
border-right:1px solid #629eb9;
}
a.mL {
display:block;
padding:1px 4px;
border-top:1px solid #015067;
text-decoration:none;
}
a.mL:link {
color:#015067;
}
a.mL:visited {
color:#015067;
}
a.mL:hover {
color:#ffffff;
background-color:#015067;
}
a.mL:active {
color:#015067;
background-color:#629eb9;
}
a.mO {
display:block;
padding:1px 4px;
border-top:1px solid #015067;
text-decoration:none;
}
a.mO:link {
color:#ffffff;
}
a.mO:visited {
color:#ffffff;
}
a.mO:hover {
color:#ffffff;
}
a.mO:active {
color:#ffffff;
}
.mD {
color:#015067;
font:bold smaller arial, Helvetica, sans-serif;
background-color:#629eb9;
visibility:hidden;
margin-top:5px;
padding:0;
position:absolute;
z-index:1000;
top:60px;
left:0;
width:125px;
border-style:solid;
border-width:0 1px 1px;
border-color:#015067;
}

 

Here is the js page.

// Drop Bown Menu - Head Script
// copyright Stephen Chapman, 4th March 2005, 5th February 2006
// you may copy this menu provided that you retain the copyright notice

var fix = 1;
var delay = 2000;
var modd = 0;
var bar = new menuBar();
bar.addMenu('Menu 1');
bar.addItem('entry1a.htm','Entry 1a');
bar.addItem('entry1b.htm','Entry 1b');
bar.addMenu('Menu 2');
bar.addItem('entry2a.htm','Entry 2a');
bar.addItem('entry2b.htm','Entry 2b');

// do not change anything below this line
var blc = '#015067';
var blh = '#629eb9';
var bla = '#015067';
var lc = '#ffffff';
var lh = '#015067';
var la = '#ffffff';
function menuBar() {
this.jj = -1;
this.kk = 0;
this.mO = new Array();
this.addMenu = addMenu;
this.addItem = addItem;
this.writeBar = writeBar;
this.writeDrop = writeDrop;
}
function addMenu(main) {
this.mO[++this.jj] = new Object();
this.mO[this.jj].main = main;
this.kk = 0;
this.mO[this.jj].link = new Array();
this.mO[this.jj].name = new Array();
}
function addItem(link,name) {
this.mO[this.jj].link[this.kk] = link;
this.mO[this.jj].name[this.kk++] = name;
}
function writeBar() {
for (var i=1;i <= this.mO.length; i++){
	document.write('<span id="navMenu'+i+'" class="mH">'+this.mO[i-1].main+'<\/span>');
	}
}
function writeDrop() {
for (var i=1;i <= this.mO.length; i++){
	document.write('<div id="dropMenu'+i+'" class="mD">\r\n');
	for (var h=0;h < this.mO[i-1].link.length; h++){
		document.write('<a class="mL" href="'+this.mO[i-1].link[h]+'">'+this.mO[i-1].name[h]+'<\/a>\r\n');
		}
	document.write('<\/div>\r\n');
	}
}
if (fix) window.onscroll=sMenu;window.onload=iMenu;
var onm = null;
var ponm = null;
var podm = null;
var ndm = bar.mO.length;
function posY() {
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;
}
function sMenu() {
document.getElementById('mB').style.top = posY() + 'px'; 
for (i=1; i<=ndm; i++) {
	menuName = 'dropMenu' + i;
	odm = document.getElementById(menuName); 
	if (onm) {
		var yPos = onm.offsetParent.offsetTop + onm.offsetParent.offsetHeight;
		odm.style.top = yPos + 'px';
		}
	}
}
function iMenu() {
if (document.getElementById) {
	document.onclick = mHide; 
	for (i=1; i<=ndm; i++) {
		menuName = 'dropMenu' + i;
		navName = 'navMenu' + i;
		odm = document.getElementById(menuName);
		onm = document.getElementById(navName); 
		odm.style.visibility = 'hidden';
		onm.onmouseover =  mHov;
		onm.onmouseout = mOut;
		} 
	onm = null;
	} 
	return;
}
function  mHov(e) {
if (modd) clearTimeout(modd);
document.onclick = null;
honm = document.getElementById(this.id); 
if (honm != onm) {
	honm.style.color = lh;
	honm.style.backgroundColor = blh;
	}
menuName = 'drop' + this.id.substring(3,this.id.length); 
odm = document.getElementById(menuName); 
if (podm == odm) {
	mHide();
	return;
	}
if (podm != null) mHide();
onm = document.getElementById(this.id); 
if ((ponm != onm ) || (podm == null)) {
	onm.style.color = la;
	onm.style.backgroundColor = bla;
	} 
if (odm) {
	xPos = onm.offsetParent.offsetLeft + onm.offsetLeft;
	yPos = onm.offsetParent.offsetTop + onm.offsetParent.offsetHeight;
	odm.style.left = xPos + 'px';
	odm.style.top = yPos + 'px';
	odm.style.visibility = 'visible';
	odm.onmouseover = omov;
	odm.onmouseout = omot;
	podm = odm; ponm = onm;
	}
}
function omov() {
if (modd) clearTimeout(modd);
}
function omot() {
modd = setTimeout('mHide()',delay);
}
function mOut(e) {
modd = setTimeout('mHide()',delay);
document.onclick = mHide;
oonm = document.getElementById(this.id); 
if (oonm != onm) {
	oonm.style.color = lc;
	oonm.style.backgroundColor = blc;
	}
}
function mHide() {
document.onclick = null;
if (podm) {
	podm.style.visibility = 'hidden';
	podm = null;
	ponm.style.color = lc;
	ponm.style.backgroundColor = blc;
	} 
onm = null;
}
if (fix) {
var ag = navigator.userAgent.toLowerCase();
var isG = (ag.indexOf('gecko') != -1);
var isR=0;
if (isG) {
	t = ag.split("rv:");
	isR = parseFloat(t[1]);
	}
if (isR && isR<1) setInterval('sMenu()',50);
}

 

Lastly the html page.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jscripts/menuh.js">
</script>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CCC</title>
</head>

<body>
<center>
<table width="1%" border="0" cellspacing="0" cellpadding="0" bgcolor="#015067">
<tr bgcolor="#FFFFFF">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#015067">
<tr bgcolor="#FFFFFF">
<td>
<img src="images/logo.png" alt="logo" />
</td>
<td align="right">
<strong>Home | Mission | Contact Us | Donate</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="3"></td>
</tr>
<tr>
<td><img src="images/header_image.png" alt="" /></td>
</tr>
<tr>
<td align="center" valign="middle"><script type="text/javascript" src="jscripts/menub.js"></script><noscript><div id="mB"><a class="mO" href="tempsite/index.html" >CCC</a></div>
</noscript></td>
</tr>
<tr height="600" bgcolor="#FFFFFF">
<td> 

</td>
</tr>
</table>
</center>
</body>
</html>

[centerwork]

I finally found the creators form. If any one use this script form about.com. Here is the fix.

 

in the menuh.js file simply change the

 

var fix = 1;

 

to

 

var fix = 0;

 

and that solved the problem.

 

Thanks.