Tabbed Navigation - OK in IE, not in Firefox

I have a tabbed interface using CSS at my site at http://www.messing-about.com/index.html and it works fine for IE and Netscape (version 6 and later), but users with Firefox tell me the top line is not visible except for the selected item. I have forgotten where I obtained the routine, but it was from one of the CSS sites out there as an example of how to make a tabbed navigation interface using CSS that would also appear as an unordered list of links if the CSS isn't supported.

Here's the CSS:

/*  BEGIN STYLE */
/* from tabs_2lines.css */
ul#topnav {
	margin:0 0 35px;
	padding: 0 0 0 12px;
	list-style: none;
	border: none;
} 


#topnav li {
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}

	
#topnav a {
	display:block;
	color:#444;
	text-decoration:none;
	background: URL(../images/lia_blue.gif) no-repeat;
	margin:0;
	padding: 0.2em 2.4em 0.2em 36px;
	border-right: 1px solid #aaa;
	position: relative;
	font: bold 11px helvetica, arial, geneva, lucida, sans-serif;
}
#topnav a#a0 { left: 0px;}
#topnav a#a1 { left: -30px;}
#topnav a#a2 { left: -60px;}
#topnav a#a3 { left: -90px;}
#topnav a#a4 { left: -120px;}
#topnav a#a5 { left: -150px;}
#topnav a#a6 { left: -180px;}
	
#topnav a:hover {
	background: URL(../images/liahover_blue.gif) no-repeat;
}

#topnav a.here {
	position:relative;
	z-index:102;
	background: URL(../images/liahover_blue.gif) no-repeat;
	border-right: 1px solid #777;
	padding: 0.2em 1em 0.2em 35px;
	margin: 0 4px 0 0;
}
	
ul#subnav {
	position:absolute;
	z-index:101;
	margin: -1px 0 0;
	left: 10px;
	padding: 1px 0px 3px 30px;
	background: #69c;
	border-top:1px solid #fff;
	border-bottom:1px solid #999;
	width: 720px;
}

	
#subnav li {
	position:relative;
	z-index:102;
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}
	
#subnav a {
	color:#fff;
	display:block;
	text-decoration:none;
	margin:0;
	padding: 2px 12px 2px 10px;
	background: transparent;
	background-image: none;
	border: 0 none;
}
	
#subnav a:hover {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
}

#subnav a.here {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
	margin:0;
	padding: 2px 12px 2px 10px;
}

/* END STYLE */
/* End tabs_2lines.css Style */

And here's the HTML that it formats:

<ul id="topnav">
   <li><a id="a0" href="./index.html" class="here">Home</a></li>
     <ul id="subnav">
       <li><a href="index.html" class="here">Intro</a></li>
       <li><a href="../weekender/">Weekender</a></li>
       <li><a href="../smallboats/">Small Boats</a></li>
     </ul>
   <li><a id="a1" href="../forum/">Forums</a></li>
   <li><a id="a2" href="../photopost/">Gallery</a></li>
   <li><a id="a3" href="../hosting/">Hosting</a></li>
   <li><a id="a4" href="../bookstore/">Store</a></li>
 </ul>
 <div style='clear:both;'></div>

Any ideas what is wrong?