CSS menu layer in wrong position

[DVDGirl]

Hi -
I have a CSS/JavaScript menu. I want to place it within a cell of a table.

Here is the CSS:
<style type="text/css">
a
{
text-decoration: none;
color: #FFFFFF;
}

.title
{position: relative;
width: 200x;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 14px;}

.submenu
{position: absolute;
width: 200px;
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
visibility: hidden;}
</style>


Here's the JS:
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site: http://hem.passagen.se/dred -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // Number of menus
var usePictures = 1; // use pictures? 1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "images/opened.gif";
}
else if (document.all) {
document.all(pic).src = "images/opened.gif";
}
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "images/closed.gif";
}
else if (document.all) {
document.all(pic).src = "images/closed.gif";
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
// End -->
</script>


Here's the cell the menu is in:
<td>
<div class="title" id="title1">
<a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src="images/closed.gif" border="0">Category 1</a>
</div>

<div class="submenu" id="submenu1">
<a href="page01.html" target="right">Item # 1</a><br>
<a href="page02.html" target="right">Item # 2</a>
</div>

<div class="title" id="title2">
<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="images/closed.gif" border="0">Category 2</a>
</div>

<div class="submenu" id="submenu2">
<a href="page03.html" target="right">Item # 3</a><br>
<a href="page04.html" target="right">Item # 4</a><br>
<a href="page05.html" target="right">Item # 5</a><br>
<a href="page06.html" target="right">Item # 6</a>
</div>
</td>


Submenu1 appears directly under the Category 1 heading when it is clicked. However, Submenu2 appears at the top of the page.

Can anyone please let me know what I'm doing wrong? Any help is greatly appreciated. Thank you!

(for some reason, the forum is putting spaces between the word javascript, so that it looks like "java script" in the onClick events)

-DVD Girl

[ronaldb66]

DVDgirl,

can you show the end result online as a working page, for i have no clue as to what this ends up in.
By the way, the java script split is probably a security measure to stop script kiddies to try and mess things up in here.

[DVDGirl]

Hi Ronald -
Here is a link:
http://priory94.dingojunction.com/test.asp

The opened.gif and closed.gif are not there, but I know that that part works. When you click on the first menu, the submenu opens fine. When you click on the second, the submenu opens at the wrong place at the top. :(

However, if you click the second menu first, the submenu appears correctly. After you click the first menu, the second one will be screwed up again.

Thanks again for taking a look. I really appreciate your help. If anyone knows how to fix this, please let me know! This has been bugging me for days!

-DVD Girl

[DVDGirl]

Still can't figure this one out...
If anyone has a different js that would work, please let me know. Thank you!

-DVD Girl