Menu works in Chrome, but nowhere else... HELP!

[jonsan32]

Don't know what I'm doing wrong, but I'm positive it's me. This dropline menu works perfectly in Chrome, but completely goes to crap in every other browser (not just IE, which I'm used to). If you have any pointers, please pass them my way. I've pasted the code - in it's long form - below... including all the script and styling exposed. Thanks a ton.

<style type="text/css">

a {color:#000;}
a:visited {color:#111;}
a:hover {color:#222;}
#container {position:relative; z-index:100;}

#outer {padding:0; text-align:center; margin:0; width:920px; background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/tab2.gif); height:30px; position:relative; z-index:500;}
#outer ul {margin:0 auto; padding:0; list-style-type:none; height:26px; border-left:1px solid #555; border-right:1px solid #555;}
#outer ul li {float:left;}
#outer ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:14px; text-decoration:none;text-align:center; line-height:22px; display:block; height:24px; padding:0 25px; white-space:nowrap; color:#000; border:1px solid #555; margin-left:-1px;}
#outer ul li a.down {background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down.gif) no-repeat right center;}
#outer ul li a:hover {color:#fff; background:#689;}

#outer ul li#ul_1 a.down:hover {color:#fff; background:#ef8e41 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;}

#outer ul li a:focus {outline:0;}
#outer ul li#li_1.clicked a.down {color:#fff; background:#000000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_2.clicked a.down {color:#fff; background:#000055 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_3.clicked a.down {color:#fff; background:#330000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_4.clicked a.down {color:#fff; background:#003300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_5.clicked a.down {color:#fff; background:#993300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}

#submenus {width:920px; background:#6a849f; position:absolute; top:0; left:0; z-index:0; height:20px;}
#submenus ul {margin:0 auto; padding:0; list-style-type:none; height:25px; position:absolute; top:0; left:0; width:920px;}
#submenus ul#ul_1 {background:#000000;}
#submenus ul#ul_2 {background:#000055;}
#submenus ul#ul_3 {background:#330000;}
#submenus ul#ul_4 {background:#003300;}
#submenus ul#ul_5 {background:#993300;}
#submenus ul li {float:left;}
#submenus ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:12px; color:#fff; text-decoration:none;text-align:center; line-height:26px; display:block; height:30px; padding:0 16px 0 10px; white-space:nowrap; background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/diamond2.gif) no-repeat right center;}
#submenus ul li a:hover {color:#fff; text-decoration:underline;}

</style>


<table width="920" align="center"><tr><td>
<div id="content">



<div id="container">

	<div id="outer">

		<ul id="menu">

			<li id="li_1" class="clicked"><a class="down" href="#nogo">J.A.M.</a></li>

			<li id="li_2"><a class="down" href="#nogo">Community</a></li>

			<li id="li_3"><a class="down" href="#nogo">Team Management</a></li>

			<li id="li_4"><a class="down" href="#nogo">Extra Information</a></li>

			<li id="li_5"><a class="down" href="#nogo">Customer Relations</a></li>

	

		</ul>

	</div>



	<div id="submenus">

	<ul id="ul_1">

		<li><a href="#nogo11">News & Registration</a></li>

		<li><a href="#nogo12">J.A.M. Newsletters</a></li>

		<li><a href="#nogo13">Camps & Clinics</a></li>

		<li><a href="#nogo14">Schedules</a></li>

		<li><a href="#nogo15">Standings</a></li>
		<li><a href="#nogo14">Tournaments</a></li>

		<li><a href="#nogo15">Contact List Signup</a></li>
	</ul>

	<ul id="ul_2">

		<li><a href="#nogo21">Community Forum</a></li>

		<li><a href="#nogo22">Local Event</a></li>

		<li><a href="#nogo23">J.A.M. Photos</a></li>

		<li><a href="#nogo21">Club Teams</a></li>

		<li><a href="#nogo22">Daily Workouts</a></li>

		<li><a href="#nogo23">Team Fundraisers</a></li>

		<li><a href="#nogo23">Sponsors</a></li>
	</ul>

	<ul id="ul_3">

		<li><a href="#nogo31">Write-Up Contest</a></li>

		<li><a href="#nogo32">Download Central</a></li>

		<li><a href="#nogo33">Random Payment</a></li>

		<li><a href="#nogo34">Uniform Purchase</a></li>

		<li><a href="#nogo35">Facility Usage</a></li>

		<li><a href="#nogo36">Hardships</a></li>
		<li><a href="#nogo36">Cancellations</a></li>

	</ul>

	<ul id="ul_4">

		<li><a href="#nogo41">Are You New?</a></li>

		<li><a href="#nogo42">FAQ's</a></li>

		<li><a href="#nogo43">Driving Directions</a></li>
		<li><a href="#nogo41">League Rules</a></li>

		<li><a href="#nogo42">Company Info</a></li>
		<li><a href="#nogo43">Terms of Service</a></li>
		<li><a href="#nogo43">Past Champions</a></li>
	</ul>

<ul id="ul_5">

		<li><a href="#nogo41">Contact Us</a></li>

		<li><a href="#nogo42">Referees</a></li>

		<li><a href="#nogo43">Feedback</a></li>
		<li><a href="#nogo41">Tips & Advice</a></li>

		<li><a href="#nogo42">Advertising</a></li>
		<li><a href="#nogo43">Donations</a></li>
		<li><a href="#nogo43">Website Tour</a></li>

	</ul>

	</div>

</div>

</td></tr></table>

<script src="https://dl-web.dropbox.com/get/Public/Dropline%20Menus/dropline6/hover_menu6.js?w=0786cd12" type="text/javascript"></script>

[jonsan32]

Wow, figured it out. Needed the ending javascript within the table, and not outside. Here's the fix.

<style type="text/css">

a {color:#000;}
a:visited {color:#111;}
a:hover {color:#222;}
#container {position:relative; z-index:100;}

#outer {padding:0; text-align:center; margin:0; width:920px; background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/tab2.gif); height:30px; position:relative; z-index:500;}
#outer ul {margin:0 auto; padding:0; list-style-type:none; height:26px; border-left:1px solid #555; border-right:1px solid #555;}
#outer ul li {float:left;}
#outer ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:14px; text-decoration:none;text-align:center; line-height:22px; display:block; height:24px; padding:0 25px; white-space:nowrap; color:#000; border:1px solid #555; margin-left:-1px;}
#outer ul li a.down {background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down.gif) no-repeat right center;}
#outer ul li a:hover {color:#fff; background:#689;}

#outer ul li#ul_1 a.down:hover {color:#fff; background:#ef8e41 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;}

#outer ul li a:focus {outline:0;}
#outer ul li#li_1.clicked a.down {color:#fff; background:#000000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_2.clicked a.down {color:#fff; background:#000055 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_3.clicked a.down {color:#fff; background:#330000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_4.clicked a.down {color:#fff; background:#003300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_5.clicked a.down {color:#fff; background:#993300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}

#submenus {width:920px; background:#6a849f; position:absolute; top:0; left:0; z-index:0; height:20px;}
#submenus ul {margin:0 auto; padding:0; list-style-type:none; height:25px; position:absolute; top:0; left:0; width:920px;}
#submenus ul#ul_1 {background:#000000;}
#submenus ul#ul_2 {background:#000055;}
#submenus ul#ul_3 {background:#330000;}
#submenus ul#ul_4 {background:#003300;}
#submenus ul#ul_5 {background:#993300;}
#submenus ul li {float:left;}
#submenus ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:12px; color:#fff; text-decoration:none;text-align:center; line-height:26px; display:block; height:30px; padding:0 16px 0 10px; white-space:nowrap; background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/diamond2.gif) no-repeat right center;}
#submenus ul li a:hover {color:#fff; text-decoration:underline;}

</style>





<table width="920" align="center"><tr><td>
<div id="content">



<div id="container">

	<div id="outer">

		<ul id="menu">

			<li id="li_1" class="clicked"><a class="down" href="#nogo">J.A.M.</a></li>

			<li id="li_2"><a class="down" href="#nogo">Community</a></li>

			<li id="li_3"><a class="down" href="#nogo">Team Management</a></li>

			<li id="li_4"><a class="down" href="#nogo">Extra Information</a></li>

			<li id="li_5"><a class="down" href="#nogo">Customer Relations</a></li>

	

		</ul>

	</div>



	<div id="submenus">

	<ul id="ul_1">

		<li><a href="#nogo11">News & Registration</a></li>

		<li><a href="#nogo12">J.A.M. Newsletters</a></li>

		<li><a href="#nogo13">Camps & Clinics</a></li>

		<li><a href="#nogo14">Schedules</a></li>

		<li><a href="#nogo15">Standings</a></li>
		<li><a href="#nogo14">Tournaments</a></li>

		<li><a href="#nogo15">Contact List Signup</a></li>
	</ul>

	<ul id="ul_2">

		<li><a href="#nogo21">Community Forum</a></li>

		<li><a href="#nogo22">Local Event</a></li>

		<li><a href="#nogo23">J.A.M. Photos</a></li>

		<li><a href="#nogo21">Club Teams</a></li>

		<li><a href="#nogo22">Daily Workouts</a></li>

		<li><a href="#nogo23">Team Fundraisers</a></li>

		<li><a href="#nogo23">Sponsors</a></li>
	</ul>

	<ul id="ul_3">

		<li><a href="#nogo31">Write-Up Contest</a></li>

		<li><a href="#nogo32">Download Central</a></li>

		<li><a href="#nogo33">Random Payment</a></li>

		<li><a href="#nogo34">Uniform Purchase</a></li>

		<li><a href="#nogo35">Facility Usage</a></li>

		<li><a href="#nogo36">Hardships</a></li>
		<li><a href="#nogo36">Cancellations</a></li>

	</ul>

	<ul id="ul_4">

		<li><a href="#nogo41">Are You New?</a></li>

		<li><a href="#nogo42">FAQ's</a></li>

		<li><a href="#nogo43">Driving Directions</a></li>
		<li><a href="#nogo41">League Rules</a></li>

		<li><a href="#nogo42">Company Info</a></li>
		<li><a href="#nogo43">Terms of Service</a></li>
		<li><a href="#nogo43">Past Champions</a></li>
	</ul>

<ul id="ul_5">

		<li><a href="#nogo41">Contact Us</a></li>

		<li><a href="#nogo42">Referees</a></li>

		<li><a href="#nogo43">Feedback</a></li>
		<li><a href="#nogo41">Tips & Advice</a></li>

		<li><a href="#nogo42">Advertising</a></li>
		<li><a href="#nogo43">Donations</a></li>
		<li><a href="#nogo43">Website Tour</a></li>

	</ul>

	</div>

</div>




<script type="text/javascript">

var getCurrent = document.getElementById('menu').getElementsByTagName("LI");
	for (var i=0; i<getCurrent.length; i++) {
		if (getCurrent[i].className == "clicked") {
		ulId = getCurrent[i].id.replace("li", "ul");
		document.getElementById(ulId).style.top = 30 + "px";
		}
		}

	var getEls = document.getElementById('menu').getElementsByTagName("LI");
	var getListElts = document.getElementById('submenus').getElementsByTagName("UL");
	var getAgn = getEls;
	

	for (var i=0; i<getEls.length; i++) {
		getEls[i].onmouseover=function() {
		this.className = 'clicked';

		for (var z=0; z<getAgn.length; z++) {
		if (this.id != getAgn[z].id){
				getAgn[z].className = '';
			}
		}

		ulId = this.id.replace("li", "ul");
		if (document.getElementById(ulId).style.top < 30 + "px") {
		moveIt (0,31,ulId)
		}
			for (var i=0; i<getListElts.length; i++) {
			if (ulId != getListElts[i].id && getListElts[i].style.top > 0 + "px"){
					thisSub = getListElts[i].id;
					moveIt (29,-1,thisSub)
				}
			}
		}
	}


function moveIt (cY, fY, sub) {
if (cY > fY) {cY--;}
else {cY++;}
if (cY != fY) {
document.getElementById(sub).style.top = cY + "px";
setTimeout ("moveIt("+cY+","+fY+",'"+sub+"')", 10);
}
}
</script>


</td></tr></table>