I am having problems with the drop down menu. in my page. I tried attaching the JavaScript file externally, but the code would not work.

I then tried placing the JavaScript in the html page, but the drop down layers were aligning left, not under there assigned spots. This was all being done in MS Web Deveopler.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=Stylesheet type="text/css" href="rhodestextStyle.css" />
<script type="text/javascript">
    window.onerror = null;
    var bName = navigator.appName;
    var bVer = parseInt(navigator.appVersion);
    var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
    var menuActive = 0;
    var menuOn = 0;
    var onLayer;
    var timeOn = null;

    function showLayer(layerName, aa) {
        var x = document.getElementById(aa);
        var tt = findPosX(x);
        var ww = findPosY(x) + 20;

        if (timeOn != null) {
            clearTimeout(timeOn);
            hideLayer(onLayer);
        }
        if (IE4) {
            var layers = eval('document.all["' + layerName + '"].style');
            layers.left = tt;
            eval('document.all["' + layerName + '"].style.visibility="visible"');
        }
        else {
            if (document.getElementById) {
                var elementRef = document.getElementById(layerName);
                if ((elementRef.style) && (elementRef.style.visibility != null)) {
                    elementRef.style.visibility = 'visible';
                    elementRef.style.left = tt;
                    elementRef.style.top = ww;
                }
            }
        }
        onLayer = layerName
    }

    function hideLayer(layerName) {
        if (menuActive == 0) {
            if (IE4) {
                eval('document.all["' + layerName + '"].style.visibility="hidden"');
            }
            else {
                if (document.getElementById) {
                    var elementRef = document.getElementById(layerName);
                    if ((elementRef.style) && (elementRef.style.visibility != null)) {
                        elementRef.style.visibility = 'hidden';
                    }
                }
            }
        }
    }

    function btnTimer() {
        timeOn = setTimeout("btnOut()", 600)
    }

    function btnOut(layerName) {
        if (menuActive == 0) {
            hideLayer(onLayer)
        }
    }

    var item;
    function menuOver(itemName, ocolor) {
        item = itemName;
        itemName.style.backgroundColor = ocolor; //background color change on mouse over
        clearTimeout(timeOn);
        menuActive = 1
    }

    function menuOut(itemName, ocolor) {
        if (item)
            itemName.style.backgroundColor = ocolor;
        menuActive = 0
        timeOn = setTimeout("hideLayer(onLayer)", 100)
    }

    function findPosX(obj) {
        var curleft = 0;
        if (obj.offsetParent) {
            while (obj.offsetParent) {
                curleft += obj.offsetLeft
                obj = obj.offsetParent;
            }
        }
        else if (obj.x)
            curleft += obj.x;
        return curleft;
    }

    function findPosY(obj) {
        var curtop = 0;
        if (obj.offsetParent) {
            while (obj.offsetParent) {
                curtop += obj.offsetTop
                obj = obj.offsetParent;
            }
        }
        else if (obj.y)
            curtop += obj.y;
        return curtop;
    }

</script>
</head>
 
<table cellpadding="5" align=center width="800" border="0" bgcolor="#ff9900" 
        cellspacing="0" id="table1" title="Rhodes Textbook Emporium">
<tr>
<th ><img alt="Textbook_Student" src="images/Student_Textbooks.jpg"/></th>
<td colspan="8"><h1>Rhodes<br>Textbook Emporium<span lang="en-us"></span></h1></td>
<tr>
<th colspan="10" width="800" height="100" bgcolor="#000066">

<table valign=top cellpadding=0 cellspacing=0 width=550 border=0>
<tr><td bgcolor=#000060>
<table align=center class=tab><tr>
<td id=0 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu0",'0') style="color: #ff9900"> <b>Home</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=1 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu1",'1') style="color: #ff9900"> <b>Subject</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=2 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu2",'2') style="color: #ff9900"> <b>Textbooks</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=3 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu3",'3') style="color: #ff9900"> <b>Services</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=4 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu4",'4') style="color: #ff9900"> <b>Contact</b></td>
</tr></table>

<div id=Menu0 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="guest.html"> &nbsp;Information &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>

<div id=Menu1 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Computer Science"> &nbsp;Computer Science &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Mathematics"> &nbsp;Mathematics &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Technology"> &nbsp;Technology &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Psycology"> &nbsp;Psycology &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>

<div id=Menu2 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="textcatalog.html"> &nbsp;New &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="textcatalog.html"> &nbsp;Used &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="textcatalog.html"> &nbsp;EBooks &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>

<div id=Menu3 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Search"> &nbsp;Search &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Shipping"> &nbsp;Shipping &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="BuyBack"> &nbsp;BuyBack &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>


<div id=Menu4 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Telephone"> &nbsp;Telephone &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Email"> &nbsp;Email &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Mail"> &nbsp;Mail &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>
</td></tr></table>
</table>
<table cellpadding="5" align=center width="800" border="0" bgcolor="#ff9900" 
        cellspacing="0" id="table2" title="Rhodes Textbook Emporium">
        <tr>

<td colspan="1" width="100" rowspan="8">
<div class="home"><a href="rhodestextbook.html">Home</a></div><br /> 
<div class="subject"><a href="rhodestextbook.html">Subject</a></div><br />
<div class="text"><a href="textcatalog.html">Textbooks</a></div><br />
<div class="service"><a href="rhodestextbook.html">Services</a></div><br />
<div class="contact"><a href="rhodestextbook.html">Contact</a></div><br />
</td>

<td width="25" rowspan="8"bgcolor="#000066"><h5>-</h5> </td>

<td colspan="6" rowspan="8" width="590" bgcolor="White">
    <h3>Welcome to Rhodes Textbook Emporium</h3>
    <h4>Since 2008; The Rhodes name has been synonymous with quality 
    new and gently used textbooks.<br /></h4>

 <h4>Our textbooks are guaranteed writing, tear, marked-up free.<br /></h4>
 
 <h4>All textbooks are subjected to quality controlled test and must have a "Rhodes Used textbook Seal of Certification" before the 
 books can be submitted to our inventory.</h4>

 <h3>Serving Students Worldwide</h3></td>
 <td colspan="1" rowspan="8"><center><img alt="used textbooks" src="images/textbooks.gif" /></center></td>
</tr>

</table> 
</body>
</html>
I than place the file in notepad and it works awesome.
Code:
<link rel=Stylesheet type="text/css" href="rhodestextStyle.css" />
<script language=javascript>
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var menuActive = 0;
var menuOn = 0;
var onLayer;
var timeOn = null;

function showLayer(layerName,aa){
var x =document.getElementById(aa);
var tt =findPosX(x);
var ww =findPosY(x)+20;

if (timeOn != null) {
clearTimeout(timeOn);
hideLayer(onLayer);
}
if (IE4) {
var layers = eval('document.all["'+layerName+'"].style');
layers.left = tt;
eval('document.all["'+layerName+'"].style.visibility="visible"');
}
else {
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'visible';
elementRef.style.left = tt;
elementRef.style.top = ww;
}
}
}
onLayer = layerName
}

function hideLayer(layerName){
if (menuActive == 0)
{
if (IE4){
eval('document.all["'+layerName+'"].style.visibility="hidden"');
}
else{
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'hidden';
}
}
}
}
}

function btnTimer() {
timeOn = setTimeout("btnOut()",600)
}

function btnOut(layerName){
if (menuActive == 0){
hideLayer(onLayer)
}
}

var item;
function menuOver(itemName,ocolor){
item=itemName;
itemName.style.backgroundColor = ocolor; //background color change on mouse over
clearTimeout(timeOn);
menuActive = 1
}

function menuOut(itemName,ocolor){
if(item)
itemName.style.backgroundColor = ocolor;
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 100)
}

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

</script>



<table cellpadding="5" align=center width="800" border="0" bgcolor="#ff9900"
        cellspacing="0" id="table1" title="Rhodes Textbook Emporium">
<tr>
<th ><img alt="Textbook_Student" src="images/Student_Textbooks.jpg"/></th>
<td colspan="8"><h1>Rhodes<br>Textbook Emporium<span lang="en-us"></span></h1></td>
<tr>
<th colspan="10" width="800" height="100" bgcolor="#000066">

<table valign=top cellpadding=0 cellspacing=0 width=550 border=0>
<tr><td bgcolor=#000060>
<table align=center class=tab><tr>
<td id=0 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu0",'0') style="color: #ff9900"> <b>Home</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=1 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu1",'1') style="color: #ff9900"> <b>Subject</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=2 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu2",'2') style="color: #ff9900"> <b>Textbooks</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=3 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu3",'3') style="color: #ff9900"> <b>Services</b></td>
<td style="color: #ffffff;"> &nbsp; || &nbsp; </td><td id=4 align=center onmouseout=btnTimer() onmouseover=showLayer("Menu4",'4') style="color: #ff9900"> <b>Contact</b></td>
</tr></table>

<div id=Menu0 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="guest.html"> &nbsp;Information &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>

<div id=Menu1 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Computer Science"> &nbsp;Computer Science &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Mathematics"> &nbsp;Mathematics &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Technology"> &nbsp;Technology &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Psycology"> &nbsp;Psycology &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>

<div id=Menu2 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="textcatalog.html"> &nbsp;New &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="textcatalog.html"> &nbsp;Used &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="textcatalog.html"> &nbsp;EBooks &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>

<div id=Menu3 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Search"> &nbsp;Search &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Shipping"> &nbsp;Shipping &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="BuyBack"> &nbsp;BuyBack &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>

<div id=Menu4 style="position: absolute; border: 1px solid #000000; visibility:hidden; z-ndex: 1">
<table bgcolor=#FFFFFF cellspacing=0 cellpadding=0 style="border-collapse: collapse;">
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Telephone"> &nbsp;Telephone &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Email"> &nbsp;Email &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height=25 onmouseout=menuOut(this,'#FFFFFF') onmouseover=menuOver(this,'#FFFFFF')>
<td bgcolor=#000060>&nbsp; &nbsp;</td><td align=left>
<a class=asd href="Mail"> &nbsp;Mail &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>
</td></tr></table>
</table>
<table cellpadding="5" align=center width="800" border="0" bgcolor="#ff9900"
        cellspacing="0" id="table2" title="Rhodes Textbook Emporium">
        <tr>

<td colspan="1" width="100" rowspan="8">
<div class="home"><a href="rhodestextbook.html">Home</a></div><br />
<div class="subject"><a href="rhodestextbook.html">Subject</a></div><br />
<div class="text"><a href="textcatalog.html">Textbooks</a></div><br />
<div class="service"><a href="rhodestextbook.html">Services</a></div><br />
<div class="contact"><a href="rhodestextbook.html">Contact</a></div><br />
</td>

<td width="25" rowspan="8"bgcolor="#000066"><h5>-</h5> </td>

<td colspan="6" rowspan="8" width="590" bgcolor="White">
    <h3>Welcome to Rhodes Textbook Emporium</h3>
    <h4>Since 2008; The Rhodes name has been synonymous with quality
    new and gently used textbooks.<br /></h4>

 <h4>Our textbooks are guaranteed writing, tear, marked-up free.<br /></h4>

 <h4>All textbooks are subjected to quality controlled test and must have a "Rhodes Used textbook Seal of Certification" before the
 books can be submitted to our inventory.</h4>

 <h3>Serving Students Worldwide</h3></td>
 <td colspan="1" rowspan="8"><center><img alt="used textbooks" src="images/textbooks.gif" /></center></td>
</tr>

</table>
</body>
</html>
I need to get this into a html page working with a external JavaScript. Please help me as I am at my wits end!!! I must be doing something wrong.
M