Question : CSS Javascript menu - problem aligning submenus

Hi,
I have a problem with the alignment of submenu when width of screen changes.
if I change line
c.style.top = top +'px';
to
c.style.top = 25+'px';
it fixes the vertical aligment but how do I fix the horizontal alignment?

<!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" xml:lang="en-us">
<head>
<style type="text/css">

a.main_menu, a.main_menu:visited, div.main_menu
{
      position:relative;
      left:3px;
      display: block;
      height: 38px;
      line-height: 38px;
      color: #FFFFFF;
      margin-top:1px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
      font-family: Arial, Helvetica-Normal, serif;
      font-size: 12px;
      font-weight: bold;
      text-decoration: none;
}

a.main_menu:hover{
      color: #999;
}

a.sub_menu, a.sub_menu:active, a.sub_menu:visited, div.sub_menu
{
      position:relative;
      color: #fff;
      text-decoration: none;
      display: block;
      height: 30px;
      line-height: 30px;
      width: 120px;
      padding-left: 15px;
      padding-right: 15px;
      margin-top: 0px;
      font-family: Arial, Helvetica-Normal, serif;
      text-align: left;
      font-size: 12px;
      font-weight: bold;
}
a.sub_menu:hover
{
      color: #333;
}

body {
      margin: 0;
      padding: 0;
      text-align: left;
      font-family: Arial, Helvetica-Normal, serif;
      font-size: 12px;
      font-weight: normal;
      color: #333333;
      background-color: #333;
      z-index: 1;
      background-repeat: repeat;
      background-position: top;
      background-attachment: fixed;
      background-color: #000;
}
#container {
      width: 982px;
      height: 590px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -295px;
      margin-left: -491px;
      background-color: #FFFFFF;
border: solid 1px #fff;
      z-index: 2;
}

#menu_top{
      width: 982px;
      height:40px;
      background-color: #000;
      line-height: 40px;
}
#main{
      width: 982px;
      z-index:-50;
      height:550px;
      padding:0;
      background-color: #000;
}

#maincontents{
      min-height: 450px;
      height:auto;
      width: 942px;
      padding: 20px;
}

#footer {
      clear:both;
      margin: 0 auto;
      width: 982px;
      height:50px;
      color: #FFFFFF;
}

</style>
<script type="text/javascript">

// Copyright (C) 2005-2008 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Re-distribute this code or any part of it.
// Instead, you may link to the homepage of this code:
// http://www.php-development.ru/javascripts/dropdown.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as part of another product.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind.
// You expressly acknowledge and agree that use of this code is at your own risk.

// ***** Popup Control *********************************************************

// ***** at_show_aux *****

function at_show_aux(parent, child)
{
var p = document.getElementById(parent);
var c = document.getElementById(child );

var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

for (; p; p = p.offsetParent)
{
top += p.offsetTop;
left += p.offsetLeft;
}

c.style.position = "absolute";
c.style.top = top +'px';
c.style.left = left +'px';
c.style.visibility = "visible";
}

// ***** at_show *****

function at_show()
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);

at_show_aux(p.id, c.id);
clearTimeout(c["at_timeout"]);
}

// ***** at_hide *****

function at_hide()
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);

c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ***** at_click *****

function at_click()
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);

if (c.style.visibility != "visible") at_show_aux(p.id, c.id); else c.style.visibility = "hidden";
return false;
}

// ***** at_attach *****

// PARAMETERS:
// parent - id of the parent html element
// child - id of the child html element that should be droped down
// showtype - "click" = drop down child html element on mouse click
// "hover" = drop down child html element on mouse over
// position - "x" = display the child html element to the right
// "y" = display the child html element below
// cursor - omit to use default cursor or specify CSS cursor name

function at_attach(parent, child, showtype, position, cursor)
{
var p = document.getElementById(parent);
var c = document.getElementById(child);

p["at_parent"] = p.id;
c["at_parent"] = p.id;
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_position"] = position;
c["at_position"] = position;

c.style.position = "absolute";
c.style.visibility = "hidden";

if (cursor != undefined) p.style.cursor = cursor;

switch (showtype)
{
case "click":
p.onclick = at_click;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
case "hover":
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
}
}

</script>
</head>
<body>
<div id="container">
<div id="menu_top"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id='menu_parent1'><a class='main_menu' href='#'>Main Menu 1</a></div>
<div id='menu_child1'></div>
</td><td><div id='menu_parent2'><a class='main_menu' href='#'>Main Menu 2</a></div>
<div id='menu_child2'>
<a class='sub_menu' href='#'>Menu 2 Submenu 1</a>
<a class='sub_menu' href='#'>Menu 2 Submenu 2</a>
<a class='sub_menu' href='#'>Menu 2 Submenu 3</a>
</div>
</td><td><div id='menu_parent3'><a class='main_menu' href='#'>Main Menu 3</a></div>
<div id='menu_child3'>
<a class='sub_menu' href='#'>Menu 3 Submenu 1</a>
<a class='sub_menu' href='#'>Menu 3 Submenu 2</a>
<a class='sub_menu' href='#'>Menu 3 Submenu 3</a>
</div>
</td><td><div id='menu_parent4'><a class='main_menu' href='#'>Main Menu 4</a></div>
<div id='menu_child4'></div>
</td><td><div id='menu_parent5'><a class='main_menu' href='#'>Main Menu 5</a></div>
<div id='menu_child5'></div>
</td>
</tr>
</table>
<script type="text/javascript">
at_attach("menu_parent1", "menu_child1", "hover", "y", "pointer");
at_attach("menu_parent2", "menu_child2", "hover", "y", "pointer");
at_attach("menu_parent3", "menu_child3", "hover", "y", "pointer");
at_attach("menu_parent4", "menu_child4", "hover", "y", "pointer");
at_attach("menu_parent5", "menu_child5", "hover", "y", "pointer");
</script></div>
<div id="main">
<div id="maincontents">Test Content</div>
</div>
<div id="footer"><table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" colspan="2" align="center">
<div id="footertext">Footer Text Here</div></td>
</tr>
</table>
</div>
</div>
</body>
</html>

Thanks in advance for you feedback.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:

           
           
          <!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" xml:lang="en-us">
<head>
<style type="text/css">

a.main_menu, a.main_menu:visited, div.main_menu
{
	position:relative;
	left:3px;
	display: block;
	height: 38px;
	line-height: 38px;
	color: #FFFFFF;
	margin-top:1px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: left;
	font-family: Arial, Helvetica-Normal, serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

a.main_menu:hover{
	color: #999;
}

a.sub_menu, a.sub_menu:active, a.sub_menu:visited, div.sub_menu
{
	position:relative;
	color: #fff;
	text-decoration: none;
	display: block;
	height: 30px;
	line-height: 30px;
	width: 120px;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 0px;
	font-family: Arial, Helvetica-Normal, serif;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
}
a.sub_menu:hover
{
	color: #333;
}



body {
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: Arial, Helvetica-Normal, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	background-color: #333;
	z-index: 1;
	background-repeat: repeat;
	background-position: top;
	background-attachment: fixed;
	background-color: #000;
}
#container {
	width: 982px;
	height: 590px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -295px;
	margin-left: -491px;
	background-color: #FFFFFF;
    border: solid 1px #fff;
	z-index: 2;
}

#menu_top{
	width: 982px;
	height:40px;
	background-color: #000;
	line-height: 40px;
}
#main{
	width: 982px;
	z-index:-50;
	height:550px;
	padding:0;
	background-color: #000;
}


#maincontents{
	min-height: 450px;
	height:auto;
	width: 942px;
	padding: 20px;
}


#footer {
	clear:both;
	margin: 0 auto;
	width: 982px;
	height:50px;
	color: #FFFFFF;
}

</style>
<script type="text/javascript"> 
 
// Copyright (C) 2005-2008 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Re-distribute this code or any part of it.
//     Instead, you may link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as part of another product.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind.
// You expressly acknowledge and agree that use of this code is at your own risk.


// ***** Popup Control *********************************************************

// ***** at_show_aux *****

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left +'px';
  c.style.visibility = "visible";
}

// ***** at_show *****

function at_show()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);
  clearTimeout(c["at_timeout"]);
}

// ***** at_hide *****

function at_hide()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ***** at_click *****

function at_click()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible") at_show_aux(p.id, c.id); else c.style.visibility = "hidden";
  return false;
}

// ***** at_attach *****

// PARAMETERS:
// parent   - id of the parent html element
// child    - id of the child  html element that should be droped down
// showtype - "click" = drop down child html element on mouse click
//            "hover" = drop down child html element on mouse over
// position - "x" = display the child html element to the right
//            "y" = display the child html element below
// cursor   - omit to use default cursor or specify CSS cursor name

function at_attach(parent, child, showtype, position, cursor)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}
 
</script>
</head>
<body>    
<div id="container">   
        <div id="menu_top"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id='menu_parent1'><a class='main_menu' href='#'>Main Menu 1</a></div> 
<div id='menu_child1'></div> 
</td><td><div id='menu_parent2'><a class='main_menu' href='#'>Main Menu 2</a></div> 
<div id='menu_child2'>
<a class='sub_menu' href='#'>Menu 2 Submenu 1</a> 
<a class='sub_menu' href='#'>Menu 2 Submenu 2</a> 
<a class='sub_menu' href='#'>Menu 2 Submenu 3</a> 
</div> 
</td><td><div id='menu_parent3'><a class='main_menu' href='#'>Main Menu 3</a></div> 
<div id='menu_child3'>
<a class='sub_menu' href='#'>Menu 3 Submenu 1</a> 
<a class='sub_menu' href='#'>Menu 3 Submenu 2</a> 
<a class='sub_menu' href='#'>Menu 3 Submenu 3</a> 
</div> 
</td><td><div id='menu_parent4'><a class='main_menu' href='#'>Main Menu 4</a></div> 
<div id='menu_child4'></div> 
</td><td><div id='menu_parent5'><a class='main_menu' href='#'>Main Menu 5</a></div> 
<div id='menu_child5'></div> 
</td>
</tr>
</table>
<script type="text/javascript"> 
at_attach("menu_parent1", "menu_child1", "hover", "y", "pointer");
at_attach("menu_parent2", "menu_child2", "hover", "y", "pointer");
at_attach("menu_parent3", "menu_child3", "hover", "y", "pointer");
at_attach("menu_parent4", "menu_child4", "hover", "y", "pointer");
at_attach("menu_parent5", "menu_child5", "hover", "y", "pointer");
</script></div><!-- end #menu -->
       <div id="main">
            <div id="maincontents">Test Content</div>
       </div><!-- end #main -->
   <div id="footer"><table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="40" colspan="2" align="center">
    <div id="footertext">Footer Text Here</div></td>
  </tr>
</table>
</div><!-- end #footer -->
</div>
</body>
</html>

           
         

Answer : CSS Javascript menu - problem aligning submenus

is this what u were looking for

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:

           
           
             <!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" xml:lang="en-us">
<head>
<style type="text/css">

a.main_menu, a.main_menu:visited, div.main_menu
{
	position:relative;
	left:3px;
	display: block;
	height: 38px;
	line-height: 38px
	color: #FFFFFF;
	margin-top:1px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: left;
	font-family: Arial, Helvetica-Normal, serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

a.main_menu:hover{
	color: #999;
}

a.sub_menu, a.sub_menu:active, a.sub_menu:visited, div.sub_menu
{
	position:relative;
	color: #fff;
	text-decoration: none;
	display: block;
	height: 30px;
	line-height: 30px;
	width: 120px;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 0px;
	font-family: Arial, Helvetica-Normal, serif;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
}
a.sub_menu:hover
{
	color: #333;
}



body {
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: Arial, Helvetica-Normal, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	background-color: #333;
	z-index: 1;
	background-repeat: repeat;
	background-position: top;
	background-attachment: fixed;
	background-color: #000;
}
#container {
	width: 982px;
	height: 590px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -295px;
	margin-left: -491px;
	background-color: #FFFFFF;
    border: solid 1px #fff;
	z-index: 2;
}

#menu_top{
	width: 982px;
	height:40px;
	background-color: #000;
	line-height: 40px;
}
#main{
	width: 982px;
	z-index:-50;
	height:550px;
	padding:0;
	background-color: #000;
}


#maincontents{
	min-height: 450px;
	height:auto;
	width: 942px;
	padding: 20px;
}


#footer {
	clear:both;
	margin: 0 auto;
	width: 982px;
	height:50px;
	color: #FFFFFF;
}

</style>
<script type="text/javascript">

// Copyright (C) 2005-2008 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Re-distribute this code or any part of it.
//     Instead, you may link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as part of another product.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind.
// You expressly acknowledge and agree that use of this code is at your own risk.


// ***** Popup Control *********************************************************

// ***** at_show_aux *****

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;


  }

//alert("ParentOffSettop"+document.getElementById(parent).OffsetTop)
  //c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left +'px';
  c.style.visibility = "visible";
}

// ***** at_show *****

function at_show()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);
  clearTimeout(c["at_timeout"]);
}

// ***** at_hide *****

function at_hide()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ***** at_click *****

function at_click()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible") at_show_aux(p.id, c.id); else c.style.visibility = "hidden";
  return false;
}

// ***** at_attach *****

// PARAMETERS:
// parent   - id of the parent html element
// child    - id of the child  html element that should be droped down
// showtype - "click" = drop down child html element on mouse click
//            "hover" = drop down child html element on mouse over
// position - "x" = display the child html element to the right
//            "y" = display the child html element below
// cursor   - omit to use default cursor or specify CSS cursor name

function at_attach(parent, child, showtype, position, cursor)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

//  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

</script>
</head>
<body>
<div id="container" style="border:1px blue solid">
        <div id="menu_top"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id='menu_parent1' style="top:0px"><a class='main_menu' style="top:0px" href='#'>Main Menu 1</a>
<div id='menu_child1'>
<a class='sub_menu' href='#'>Menu 1 Submenu 1</a>
<a class='sub_menu' href='#'>Menu 1 Submenu 2</a>
<a class='sub_menu' href='#'>Menu 1 Submenu 3</a>
</div>
</div>

</td><td><div id='menu_parent2' style="top:0px"><a class='main_menu' href='#'>Main Menu 2</a></div>
<div id='menu_child2' style="poition:relative;border:1px solid green">
<a class='sub_menu' href='#'>Menu 2 Submenu 1</a>
<a class='sub_menu' href='#'>Menu 2 Submenu 2</a>
<a class='sub_menu' href='#'>Menu 2 Submenu 3</a>
</div>
</td><td><div id='menu_parent3' style='top:0px;border:1px red solid'><a class='main_menu' href='#'>Main Menu 3</a></div>
<div id='menu_child3'>
<a class='sub_menu' href='#'>Menu 3 Submenu 1</a>
<a class='sub_menu' href='#'>Menu 3 Submenu 2</a>
<a class='sub_menu' href='#'>Menu 3 Submenu 3</a>
</div>
</td><td><div id='menu_parent4' style='top:0px'><a class='main_menu' href='#'>Main Menu 4</a></div>
<div id='menu_child4' style='height:100px'></div>
</td><td><div id='menu_parent5' style="top:0px"><a class='main_menu' href='#'>Main Menu 5</a></div>
<div id='menu_child5'style='height:100px'></div>
</td>
</tr>
</table>
<script type="text/javascript">
at_attach("menu_parent1", "menu_child1", "hover", "y", "pointer");
at_attach("menu_parent2", "menu_child2", "hover", "y", "pointer");
at_attach("menu_parent3", "menu_child3", "hover", "y", "pointer");
at_attach("menu_parent4", "menu_child4", "hover", "y", "pointer");
at_attach("menu_parent5", "menu_child5", "hover", "y", "pointer");
</script></div><!-- end #menu -->
       <div id="main">
            <div id="maincontents">Test Content</div>
       </div><!-- end #main -->
   <div id="footer"><table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="40" colspan="2" align="center">
    <div id="footertext">Footer Text Here</div></td>
  </tr>
</table>
</div><!-- end #footer -->
</div>
</body>
</html>

           
         