Problem with new browsers with my menu need help plz.

[WebFreakz]

Ok I have an old website of mine I would like to bring up to date. I have not had it online in a long time since 2006. I have been working a job and not fluent with javascript. Need to se if the java or css is the issue. I will post both java and css and maybe someone can help and tell me why my menu doesn't expand anymore. I will give an example of what should happen next.

Example:
Listings(when you click on it it expands like next example.

Example:
Listings
-Add
-Delete
- Edit

The menu used to work fine and no longer functions.

Here is the java script code

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var nom = 11; // Number of menus
var usePictures = 0; // 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 = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
   }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "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 is the css code as well.

<div class="title" id="title1" style="top: 10px"> 
<a href="#" onclick="javascript: toggle(1,40); return false">Listings</a>
</div>

<div class="submenu" id="submenu1" style="top: 30px">
 <a href="PostOffer.php" target="right">Add</a><br>
 <a href="select.php?action=edit" target="right">Edit</a><br>
 <a href="select.php?action=delete" target="right">Delete</a>
</div>

[mrhoo]

Get rid of all the document.layers and document.all code, and don't make so many globals.

Change position by assigning top and left pixels, visibility with hidden and visible.
Use the style property-

element.style.top=x+'px';

[WebFreakz]

Mr Hoo I am not fluent in javascript as I had mentioned an you help me adjust the ode to get it to work? I would appreciate it greatly/ Thank you