A bizarre navbar that displays locally but not on the web

This is one of the weirdest problems I've ever seen and will be genuinely grateful if any one can point me in the right direction.

I've created a drop-down menu bar using the Son of Suckerfish technique. When I am viewing the test page locally (eg. looking at the page from my hard drive) the drop-downs work just swimmingly. When I upload the test page and css though, it doesn't work.

After uploading the page it works in Mozilla (ie. the menus drop down, they look like crap, but I'll have to fix that later). But in IE6 absolutely nothing happens, even though I was just testing, and still testing it from the hard drive.

I have never had part of a file stop working just because it was uploaded to the web. To clarify, the css file does work, the whole page is styled except there are no drop-downs in IE6.

The test page is at http://www.chrisbroughton.com/dg/text.html

Here is what I think is the relevant CSS code is:

body {
	background: #AAAAAA;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#page
{
	background: #9d9d9d;
	width: 94%;
	border: 1px solid #676767;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#header {
	background: no-repeat;
	height: 154px;
}

#header h1 {
	display: none;
}

#rndheader {
	background: no-repeat;
	height: 154px;
}

#rndheader h1 {
	display: none;
}

#navcontainer
{
	background: #666666 url("../images/menubg.jpg") no-repeat;
	height: 28px;
}

#nav
{
	padding-left: 0px;
	margin-left: 0px;
}
 
#nav a
{
	margin-top: 3px;
	padding-left: 20px;
	font-size: 20px;
	display: block;	
}

#nav li ul li a
{
	text-decoration: none;
	color: #C1261D;
	padding-left: 8px;
}
 
#nav li
{
	float: left;
	height: 28px;
	list-style: none;
}

#nav li ul li
{
	float: left;
	clear: left;
	height: 0px;
	margin: 5px 20px 5px 0px;
	padding: 0px;
}

#nav ul
{
	background: #999999;
	border-style: solid;
	border-color: #666666;
	border-left-color: #C1261D;
	border-width: 0px 1px 1px 7px;
	top: 183px;
	font-size: .8em;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	margin-left: 15px;
	display: block;
}

#nav ul a
{
	font-size: 1em;
}

#nav li ul
{
	position: absolute;
	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul
{
	left: auto;
}

#navcontainer #about
{
	background: url(../images/mnu_about.gif) no-repeat;
}

#navcontainer #services
{
	background: url(../images/mnu_services.gif) no-repeat;
}

#navcontainer #gallery
{
	background: url(../images/mnu_gallery.gif) no-repeat;
}

#navcontainer #careers
{
	background: url(../images/mnu_careers.gif) no-repeat;
}

#navcontainer #safety
{
	background: url(../images/mnu_safety.gif) no-repeat;
}

#navcontainer #links
{
	background: url(../images/mnu_links.gif) no-repeat;
}

#navcontainer #contact
{
	background: url(../images/mnu_contact.gif) no-repeat;
}

#navcontainer a em{
	visibility: hidden;
}