menu doesn't work in netscape

[samer]

Hi,
I have a menu that works in IE 5.5! But, I just tested it in netscape 4.74; It just shows ALL the menu and submenu's and that's it. Could there be a problem in my css document? The hover affect in css doesn't work just as onclick in javascript doesn't work.

Probably some features that i'm using may not be supported by my browser (IE 5.5, NES 4.74). I should be using IE 5.0 and NES 4.5 because that's what the client is going to be using. I haven't tested this problem in netscape 4.5 yet.
Any help will be appreciated!
_______________________
here is the css code:

a
{color: navy;
background: transparent;
text-decoration: none;}

A:link { text-decoration: none;}
A:visited { text-decoration: none;}
A:hover{text-decoration: none; color:#FFFFFF; background-color: navy; }

.title
{position: absolute;
width: 120px;
height: 1200px;
top: 20px;
left: 5px;
z-index: 10;
background-color: white;
font-family: arial, helvetica, sans-serif;
font-weight: normal;
font-size: 10px;}

.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px ;
ex: solid black
background-color: transparent;
layer-background-color: purple;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}

________________________________
and here is part of the .js code:
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;
picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[****[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(****[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
picopen(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[****[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(****[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}
}

document.write( '<div class="title" id="title2" style="top: 160px">' );
document.write( '<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="images/closed.gif" border="0" hspace="2">Papalima </a>' );
document.write( '</div>' );

document.write( '<div class="submenu" id="submenu2" style="top: 180px">' );
document.write( '<a href="SampleTree.html">Papa 2</a><br>' );
document.write( '<a href="SampleTree.html">Papa 3</a><br>' );
document.write( '</div>' );

thanks,
samer

[This message has been edited by samer (edited 12-19-2000).]

[kick]

why not use the hiermenu you can find here ? http://www.dhtmlab.com