ul li ul display:none; not working in Firefox

[Ultimater]

This works as intended in IE but not in Firefox. IE starts with the 8 main navigation links display:block; that you can hover over to show the rest. Firefox starts with all 54 links display:block;

I know it's a CSS problem because I tried commenting out the JavaScript and still Firefox starts out with all 54 display:block; regardless.

I know, I know, design in Firefox THEN make it work for IE. What can I do, my employer designs the reverse. Thanks in advance.

<script type="text/javascript">

// JavaScript Document

startList = function() {
if (document.getElementById) {
var navRoot = document.getElementById("nav");
for (var n,i=0; i<navRoot.childNodes.length; i++) {
n = navRoot.childNodes[i];

if (n.nodeName=="LI") {
n.onmouseover=function(){this.className+=" over";}
n.onmouseout=function(){this.className=this.className.replace(" over", "");}
}


}//for
}//if
}//fun
window.onload=startList;

</script>
<style type="text/css">
body {
font: normal 9px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

ul li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}


/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul{ display: block; } /* The magic */
</style>

<ul class="style7" id="nav">
<li><a href="#">AUTOS FOR SALE</a></li>
<ul>
<li><span class="style7"><a href="#">AMERICAN CARS</a></span></li>
<li class="style7"><a href="#">CLASSIC CARS</a></li>
<li class="style7"><a href="#">FOREIGN CARS</a></li>

<li class="style7"><a href="#">PICKUP TRUCKS</a></li>
<li class="style7"><a href="#">RACE CARS</a></li>
<li class="style7"><a href="#">SUV'S</a></li>
<li><span class="style7"><a href="#">VANS</a></span></li>
</ul>
<li><a href="#">CLASSIFIEDS</a></li>

<ul>
<li class="style7"><a href="#">BLANK</a></li>
<li class="style7"><a href="#">BLANK</a></li>
<li class="style7"><a href="#">BLANK</a></li>
<li><span class="style7"><a href="#">BLANK</a></span></li>
</ul>
<li><a href="#">HEALTH & MEDICINE HEADLINES</a></li>

<ul class="style7">
<li><a href="#">HEALTH NEWS</a></li>
</ul>
<li><a href="#">HOROSCOPES</a></li>
<ul class="style7">
<li><a href="#">ARIES</a></li>
<li><a href="#">TAURUS</a></li>

<li><a href="#">GEMINI</a></li>
<li><a href="#">CANCER</a></li>
<li><a href="#">LEO</a></li>
<li><a href="#">VIRGO</a></li>
<li><a href="#">LIBRA</a></li>
<li><a href="#">SCORPIO</a></li>

<li><a href="#">SAGITTARIUS</a></li>
<li><a href="#">CAPRICORN</a></li>
<li><a href="#">AQUARIUS</a></li>
<li><a href="#">PISCES</a></li>
</ul>
<li><a href="#">JOBS/EMPLOYMENT</a></li>

<ul class="style7">
<li><a href="#">PARTTIME</a></li>
<li><a href="#">FULLTIME</a></li>
<li><a href="#">WORK FROM HOME</a></li>
<li><a href="#">POST YOUR RESUME</a></li>
<li><a href="#">SEARCH EMPLOYEES</a></li>

</ul>
<li><a href="#">NEWS HEADLINES</a></li>
<ul class="style7">
<li><a href="#">TOP NEWS</a></li>
<li><a href="#">NATIONAL NEWS</a></li>
<li><a href="#">MICHIGAN NEWS</a></li>
<li><a href="#">MICHIGAN PRESS RELEASES</a></li>

</ul>
<li><a href="#">PERSONALS</a></li>
<ul class="style7">
<li><a href="#">MALE SEEKING FEMALE</a></li>
<li><a href="#">FEMALE SEEKING MALE</a></li>
<li><a href="#">MALE SEEKING MALE</a></li>
<li><a href="#">FEMALE SEEKING FEMALE</a></li>

</ul>
<li><a href="#">REAL ESTATE & RENTALS</a></li>
<ul>
<li class="style7"><a href="#">BEACHFRONT HOMES</a></li>
<li class="style7"><a href="#">CONDOS & TIME SHARES</a></li>
<li class="style7"><a href="#">FARMS & ACRES</a></li>

<li class="style7"><a href="#">HOMES FOR SALE</a></li>
<li class="style7"><a href="#">MANUFACTURED HOMES</a></li>
<li class="style7"><a href="#">ROOMMATES WANTED</a></li>
<li class="style7"><a href="#">ROOMS FOR RENT</a></li>
<li><span class="style7"><a href="#">VACATION HOMES</a></span></li>

</ul>
</ul>

[toicontien]

Your markup was incorrectly closed:
<li><a href="#">AUTOS FOR SALE</a></li>
<ul>

The LI tag closed before the opening UL tag that's supposed to go inside the LI tag (ul li ul { ... }).

[Ultimater]

Does that mean It would turn into this?

<ul class="style7" id="nav">
<li><a href="#">AUTOS FOR SALE</a></li>
<li><ul>
<li><span class="style7"><a href="#">AMERICAN CARS</a></span></li>
<li class="style7"><a href="#">CLASSIC CARS</a></li>
<li class="style7"><a href="#">FOREIGN CARS</a></li>

<li class="style7"><a href="#">PICKUP TRUCKS</a></li>
<li class="style7"><a href="#">RACE CARS</a></li>
<li class="style7"><a href="#">SUV'S</a></li>
<li><span class="style7"><a href="#">VANS</a></span></li>
</ul></li>
...
</ul>

[ray326]

Yes. The only tag allowed in a UL is an LI.