Hey...this may possibly be a dumb question; I'm still pretty much a complete n00b at HTML/CSS and this is only the second site I've really tried to code.

I haven't tried to deal with cross-browser compatibility in IE yet so I'm sure it looks completely whack there, but I've been surprised by issues I've been having between FF, Safari, and Opera -- it was my understanding that those three browsers read things pretty much the same.

Basically, the site has a bunch of horizontal dropdown menus (uls with li:hover functions). Here's the relevant code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>Star Trek: Andromeda</title>
<link rel="stylesheet" type="text/css" href="http://www.trekandromeda.com/home.css" />
</head>
<body>

<!-- Menu -->

<div id="bg">

<div id="home"><ul id="menu"><li><a href="http://www.trekandromeda.com/home.html"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a>
	<ul class="marginone">
	<li><a href="http://www.trekandromeda.com/home.html">Site Home</a></li>

	<li><a href="http://forums.sb254.com/index.php?f=686">STA Forums</a></li>
	<li><a href="http://www.sb254.com/">FSF Home</a></li>
	</ul></li></ul></div>

<div id="news"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a>
	<ul class="marginone">
	<li><a href="http://www.trekandromeda.com/news.html">Recent News</a></li>
	<li><a href="http://www.trekandromeda.com/awards.html">Game Awards</a></li>

	</ul></li></ul></div>

<div id="info"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton2.png"></i></a>
	<ul class="margintwo">
	<li><a href="http://www.trekandromeda.com/chat.html">Chat Room</a></li>
	<li><a href="http://www.trekandromeda.com/odysseyplot.html">STA Plot</a></li>
	<li><a href="http://www.trekandromeda.com/odysseycrew.html">STA Crew</a></li>
	<li><a href="http://www.trekandromeda.com/staff.html">STA Staff</a></li>

	<li><a href="http://www.trekandromeda.com/join.html">Join</a></li>
	</ul></li></ul></div>

<div id="tech"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a>
	<ul class="marginone">
	<li><a href="http://www.trekandromeda.com/ships.html">Ships</a></li>
	<li><a href="http://www.trekandromeda.com/equipment.html">Fleet Tech</a></li>
	<li><a href="http://www.trekandromeda.com/science.html">Science Docs</a></li>

</ul></li></ul></div>

<div id="andromeda"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/Temp/menubutton2.png"></i></a>
	<ul class="marginthree">
	<li><a href="http://www.trekandromeda.com/races.html">Xenobiology</a></li>
	<li><a href="http://www.trekandromeda.com/maps.html">Stellar Cartography</a></li>
	</ul></li></ul></div>
</div>

</body></html>
And the CSS:
Code:
body
	{background: #000000;
	width: 1228px;
	font-family: Arial;}
	
	
/* MENU */

#bg
	{background: #000000;
	background-image: url("http://www.trekandromeda.com/Temp/blue3.png");
	background-repeat: no-repeat;
	height: 700px;
	}

#home
	{position: absolute;
	left: -7px;}
	
#news
	{position: absolute;
	left: 207px;}
	
#info
	{position: absolute;
	left: 420px;}
	
#tech
	{position: absolute;
	left: 725px;}
	
#andromeda
	{position: absolute;
	left: 925px;}
	
ul#menu{
	position: relative;
	top: 240px;
  	text-decoration: none;
	opacity: 100;
	list-style: none;}
	
ul#menu li {
	float: left;
  	position: relative;
  	width: 108px;
  	list-style: none;
  	top: auto;
  	left: auto;}
  	
ul#menu li a img {
	position: relative;
	opacity: 0;}
  	
ul#menu li ul {
	position: relative;
	display: none;}
	
ul#menu li ul.marginone li {
	float: left;
	position: relative;
	font-variant: small-caps;
	margin-left: -43px;}
	
ul#menu li ul.margintwo li {
	float: left;
	position: relative;
	font-variant: small-caps;
	margin-left: 25px;}
	
ul#menu li ul.marginthree li {
	float: left;
	position: relative;
	font-variant: small-caps;
	margin-left: -50px;
	width: 240px;}

ul#menu li:hover ul {
	position: relative;
	display: block;
	margin-top: -5px;
	}
	
ul#menu li:hover ul li {
	float: left;
	position: relative;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: #000000;
	height: 20px;
	border: 1px solid #54A2E2;
	z-index: 1000;
	}
	
ul#menu li ul li:hover {
	float: left;
	position: relative;
	display: block;
	color: #000000;
	background: #54A2E2;
	border: 1px solid #54A2E2;}


/* Links */

a:link {text-decoration: none; color: inherit;}
a:visited {text-decoration: none; color: inherit;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
In Firefox (and in Opera, although the placement is a little funky) the dropdown menus have an li:hover effect which changes the color of the one which is being hovered over. However, this is not working in Safari and I'm not entirely sure why. Does anyone have any ideas on what I can do to fix this?

Thanks!