javascript menu

[MONFU]

I tried to do a tutorial on how to make a Javascript menu, however nothing is appearing on the screen. Can anyone help me please and tell me what is wrong?

Here is the code:-

<style>
.menu a{
color: white;
font: 10pt Verdana,sans-serif;
}
.menu a:hover{
color: yellow;
}
.trigger th{
color: white;
font: 10pt Verdana,sans-serif;
font-weight: 700;
}
.trigger{
font: 10pt Verdana, sans-serif;
color: white;
background-color: FF0000;
position: absolute;
padding: 2px;
width: 100;
height: 15;
z-index: 2;
cursor: pointer;
cursor: hand;
}
.menu{
font: 8pt Verdana, sans-serif;
color: white;
background-color: FF0000;
position: absolute;
top: 23;
padding: 4px;
width: 100;
visibility: hidden;
z-index: 2;
}
.menuBar{
background-color: FF0000;
position: absolute;
top: 0;
left: 0;
height: 25;
z-index: 1;
padding: 4px;
}
</style>
<script language=&quot;JavaScript&quot;>
function menuItem(text, link){
this.text = text;
this.link = link;
}
function menuTrigger(name, text){
this.name = name;
this.text = text;
}
function menu(){
var itemArray = new Array();
var args = menu.arguments;
this.name = args[0];
this.trigger = args[1];
for(i=2; i<args.length; i++){
itemArray[i-2] = args;
}
this.menuItems = itemArray;
this.write = writeMenu;
this.position = positionMenu;
}
function positionMenu(top,left,width){
this.top = top;
this.left = left;
this.width = width;
}
function writeMenu(){
var menuText = '<div id=&quot;';
menuText += this.trigger.name;
menuText += '&quot; class=&quot;trigger&quot; style=&quot;top: ';
menuText += this.top;
menuText += '; left: ';
menuText += this.left;
menuText += ';&quot;';
menuText += 'onMouseOver=&quot;showMenu(\'';
menuText += this.name;
menuText += '\')&quot;
onMouseOut=&quot;hideMenu(mnuSelected)&quot;>';
menuText += '<table border=&quot;0&quot; width=&quot;' +
this.width + '&quot;>';
menuText += '<tr><th>' + this.trigger.text +
'</th></tr></table></div>';
menuText += '<div id=&quot;';
menuText += this.name;
menuText += '&quot; class=&quot;menu&quot; style=&quot;top: ';
menuText += (this.top+23);
menuText += ';left: ';
menuText += this.left;
menuText += ';&quot; '
menuText += 'onMouseOver=&quot;showMenu(mnuSelected)&quot; ';
menuText += 'onMouseOut=&quot;hideMenu(mnuSelected)&quot;>';
menuText += '<table border=&quot;0&quot; width=&quot;' +
this.width + '&quot;>';
for(i=0; i<this.menuItems.length; i++){
menuText += '<tr>';
menuText += '<td
onMouseOver=&quot;this.style.backgroundColor = \'red\'&quot;
onMouseOut=&quot;this.style.backgroundColor = \'\'&quot;>';
menuText += '<a href=&quot;' + this.menuItems.link + '&quot;>';
menuText += this.menuItems.text + '</a></td>';
menuText += '</tr>';
}
menuText += '</table></div>';
document.write(menuText);
document.close();
}
var mnuSelected = '';
function showMenu(menu){
hideMenu(mnuSelected);
document.getElementById(menu).style.visibility = 'visible';
mnuSelected = menu;
}
function hideMenu(menu){
if(mnuSelected!='')
document.getElementById(menu).style.visibility = 'hidden';
}
</script>

<div id=&quot;menuBar&quot; class=&quot;menuBar&quot;></div>
<script language=&quot;JavaScript&quot;>
if(document.all){
aWidth = document.body.clientWidth;
document.getElementById('menuBar').style.width = aWidth;
}else{
aWidth = innerWidth;
document.getElementById('menuBar').style.width = aWidth-8;
}
var mnuAbout = new menu('mnuAbout',
new menuTrigger('trgAbout','About Us'),
new menuItem('About1','#'),
new menuItem('About2','#'),
new menuItem('About3','#'));
mnuAbout.position(0,(aWidth/2-200),100);
mnuAbout.write();
var mnuServices = new menu('mnuServices',
new menuTrigger('trgServices','Services'),
new menuItem('Services1','#'),
new menuItem('Services2','#'),
new menuItem('Services3','#'));
mnuServices.position(0,(aWidth/2-100),100);
mnuServices.write();

var mnuSamples = new menu('mnuSamples',
new menuTrigger('trgSamples','Samples'),
new menuItem('Samples1','#'),
new menuItem('Samples2','#'),
new menuItem('Samples3','#'));
mnuSamples.position(0,(aWidth/2),100);
mnuSamples.write();

var mnuContact = new menu('mnuContact',
new menuTrigger('trgContact','Contact Us'),
new menuItem('Contact1','#'),
new menuItem('Contact2','#'),
new menuItem('Contact3','#'));
mnuContact.position(0,(aWidth/2+100),100);
mnuContact.write();
</script>


Thanks for all your help

 

[neillovell]

Do you need some HTML code in place to use this?