Drop Down problems when published

When I preview this it is perfect, when I publish it it doesn't work. I have been working on this for days and am now getting frustrated. I am no "webmaster" however, I just can't figure why this is happening.

I appreciate any assistance offered, this is a wonderful forum.

Rhonda
www.dreamsonthefly.com






Here is my html code:


<style>
<!--
#foldheader{cursor:pointer;cursor:hand;}
//-->
</style>
<FONT FACE="Verdana" SIZE="5"COLOR="#000000">

<li id="foldheader"><a href="http://www.dreamsonthefly.com/index.html">Home</li></a>

<FONT FACE="Verdana" SIZE="5"COLOR="#000000">

<li id="foldheader">Steelhead
<ul id="foldinglist" style="display:none"<font size="3"><li><a target = "_parent"
<a href="http://www.dreamsonthefly.com/granderonde.html">Grande Ronde </a></ul>


<FONT FACE="Verdana" SIZE="5"COLOR="#000000">

<li id="foldheader">Bass</li>
<ul id="foldinglist" style="display:none"
<font size="3"> <li><a target = "_parent" <a href="http://www.dreamsonthefly.com/bass.html">Smallmouth </a></li></ul>


<FONT FACE="Verdana" SIZE="5"COLOR="#000000">

<li id="foldheader">Education</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<font size="3"> <li><a target = "_parent" <a href="http://www.dreamsonthefly.com/education.html">Reading Steelhead Water </a></li>

<li><a target = "_parent" <ul> <a href="http://www.dreamsonthefly.com/education.html">Knots </a></li></ul>

<FONT FACE="Verdana" SIZE="5"COLOR="#000000">

<li id="foldheader"> Trout</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<font size="3"> <li><a target = "_parent" <ul> <a href="http://www.dreamsonthefly.com/newOwyhee.html">Amazing Owyhee </a></li>
<li><a target = "_parent" <ul> <a href="http://www.dreamsonthefly.com/diamond.html">Our friends at Diamond D Ranch </a></li></ul>



</font>
</style>


Here is my js code:

var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}


function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

I just can't figure why this is happening.

What is the 'why'?

Please use tag to wrap your code while posting here(you may edit your above post).

Don't rely completely on javascript to make a drop-down menu, as people won't see anything if they don't have a javascript support. Use a CSS based one instead, see http://htmldog.com/articles/suckerfish/dropdowns/

PS: Always validate your code and fix all errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dreamsonthefly.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0). Your DOCTYPE is incomplete (http://www.alistapart.com/articles/doctype/).