Menu

<style type="text/css"> <!--
.submenuStyle {
    position: absolute;
    visibility: hidden;
}
.menuStyle {
	visibility: visable;
}
.m
{
    FONT-SIZE: 11px;
    COLOR: navy;
    BORDER-BOTTOM: navy 1px solid;
    FONT-FAMILY: sans-serif;
    TEXT-DECORATION: none
}
//--></style>
<script language="JavaScript"><!--
  // Original code by Charles Toepfer: [email protected]
  // Please acknowledge use of this code by including this header.
  // How many pixels to adjust down:
  var steps = 20;
  // How many total items untill the table is splits:
  var split = 10;
  // How many pixels to adjust left:
  var rsteps = 6;
  // Try these for vertical menus:
  // var steps = -6;
  // How many total items untill the table is splits:
  // var split = 200	;
  // How many pixels to adjust left:
  // var rsteps = -74;
// Create new main array.
 var menuitems =		[ ["href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1", "href 1", "name1"],
						  ["href 2", "name2"] ]
 //Generate Span Layers -Charles Toepfer
function generate_layers()
{ 
  var x=0; 
  browser_type = navigator.appName;
  for (x=0; x< menuitems.length; x++) 
	  { 
		if (browser_type ==  "Microsoft Internet Explorer") { 
		document.writeln ('<div id=submenu'+ (x+1)  +' name=submenu'+ (x+1)  +' class=submenuStyle style="z-index:1;">');
		}
		else {
		document.writeln ('<div id=submenu'+ (x+1)  +' name=submenu'+ (x+1)  +' class=submenuStyle>');
		}		
		document.writeln ('<table border=1 bgcolor=#999999 bordercolor=#003366 cellspacing=0 cellpadding=5><tr><td valign=top>')
		 var intmaxsplit = 50
			if ((menuitems[x].length/4) > (split/2)) { 
			var intmaxsplit = (menuitems[x].length/2) 
			if  (((intmaxsplit) % 2) == 0.5) {var intmaxsplit = intmaxsplit + 1;} 
			}
		  for (xx=0; xx< menuitems[x].length; xx++) 
		  { 
			if (browser_type ==  "Microsoft Internet Explorer") {
			document.writeln ('<TABLE width=200 border=0 cellspacing=0 cellpadding=0><TR>')
			document.writeln ('<TD style=width:100%;  onMouseover=this.style.backgroundColor="#aabbdd"; onMouseout=this.style.backgroundColor="";>')
			document.writeln ('<a href = ' + menuitems[x][xx] + ' class=m >');
			document.writeln ('' + menuitems[x][xx+1] + '</a><br>');
			document.writeln ('</TD></TR></TABLE>'); 
			}
			else {
			document.writeln ('<a href = ' + menuitems[x][xx] + ' class=m >');
			document.writeln ('' + menuitems[x][xx+1] + '</a><br>');
			}
		   xx = xx +1
		    if ((xx) > intmaxsplit - 2) { document.writeln('</td><td valign=top>') 
		    var intmaxsplit = 500
		    }   
		  }
		document.writeln ('<br>'); 
		document.writeln ('</td></tr></table></div>');  
		  } 
	 }
generate_layers();
if (browser_type == "Netscape" && (browser_version >= 4) && navigator.platform.indexOf("Mac") >= 0) { var steps = steps - 20 }
function getAnchorPosition(anchorname) {
	var useWindow = false;
	var coordinates = new Object();
	var x=0;
	var y=0;
	var w_gebi = false;
	var w_css = false;
	var w_layers = false;
	if (document.getElementById) { w_gebi = true; }
	else if (document.all) { w_css = true; }
	else if (document.layers) { w_layers = true; }
 	if (w_gebi && document.all) {
		x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
		y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);
		}
	else if (w_gebi) {
		var o = document.getElementById(anchorname);
		x = o.offsetLeft;
		y = o.offsetTop;
		}
 	else if (w_css) {
		x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
		y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);
		}
	else if (w_layers) {
		var found=0;
		for (var i=0; i<document.anchors.length; i++) {
			if (document.anchors[i].name == anchorname) {
				found=1;
				break;
				}
			}
		if (found == 0) {
			coordinates.x=0; coordinates.y=0; return coordinates;
			}
		x = document.anchors[i].x;
		y = document.anchors[[i]].y;
		}
	else {
		coordinates.x=0; coordinates.y=0; return coordinates;
		}
	coordinates.x = x;
	coordinates.y = y;
	return coordinates;
	}
function AnchorPosition_getPageOffsetLeft (el) {
	var ol = el.offsetLeft;
	while ((el = el.offsetParent) != null) { 
		ol += el.offsetLeft; 
		}
	return ol;
	}
function AnchorPosition_getWindowOffsetLeft (el) {
	var scrollamount = document.body.scrollLeft;
	return AnchorPosition_getPageOffsetLeft(el)-scrollamount;
	}	
function AnchorPosition_getPageOffsetTop (el) {
	var ot = el.offsetTop;
	while((el = el.offsetParent) != null) { 
		ot += el.offsetTop; 
		}
	return ot;
	}
function AnchorPosition_getWindowOffsetTop (el) {
	var scrollamount = document.body.scrollTop;
	return AnchorPosition_getPageOffsetTop(el)-scrollamount;
	}
function removeall() {
	for(i = 1; i <= menuitems.length; i++) { remove(i);  }
}
function show(object) {
	var c = getAnchorPosition(object.replace(/submenu/, "menu"));
	if (c.x < 1) { c.x = 21; }
	if (c.y < 1) { c.y = 155; }
    if (document.getElementById && document.getElementById(object) != null) {
        document.getElementById(object).style.top=c.y + steps+"px";
        document.getElementById(object).style.left= c.x - rsteps+"px";
        node = document.getElementById(object).style.visibility='visible';
        document.body.onclick= removeall;
    }
    else if (document.layers && document.layers[object] != null) {
		 document.layers[object].visibility = 'visible';
		 document.layers[object].top = c.y + steps;
		 document.layers[object].left = c.x - rsteps;
		 document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN);
		 document.onmousedown = removeall;
		 }
    else if (document.all) 
	  {
        document.all[object].style.visibility = 'visible';
        document.all[object].style.pixelTop = c.y + steps;
		document.all[object].style.pixelLeft = c.x - rsteps;
		document.body.onclick= removeall;
		}
	var id = object.replace(/submenu/, "");
	for(i = 1; i <= menuitems.length; i++)
	{
		if  (i != id) {
		remove(i);
		}
	}
	var c = null
}
function removeall() {
	for(i = 1; i <= menuitems.length; i++) { remove(i);  }
}
function remove(id) {
      if (document.getElementById && document.getElementById('submenu'+id) != null) {
        node = document.getElementById('submenu'+id).style.visibility='hidden';
    }
    else if (document.layers && document.layers['submenu'+id] != null) {
		 document.layers['submenu'+id].visibility = 'hidden';
		 }
    else if (document.all) 
	  {
        document.all['submenu'+id].style.visibility = 'hidden';
		}
}
//--></script>
<table border=1 bgcolor=#999999 bordercolor=#003366 cellspacing=0 cellpadding=5><tr>
<td><a href="/macmall/shop/category.asp?eStore=14659000" onMouseOver="show('submenu1')" class="m" id="menu1" name="menu1">TEST MENU A</a></td>
<td><a href="/macmall/shop/category.asp?eStore=14659000" onMouseOver="show('submenu2')" class="m" id="menu2" name="menu2">TEST 2</a></td>
</tr></table>
<p>