CSS inhalt wird nicht übernommen

[Ekkez]

Hallo!

Ich habe ein Problem. Ich habe ein Menü in meiner CSS Datei, sowie in der index.html eingefügt. Dennoch sieht es nicht so aus, wie es eigentlich sein sollte.

::::Code CSS::::

ul#menu  
{  
	margin:0;  
	padding:0;  
	list-style-type:none;  
	width:auto;  
	position:relative;  
	display:block;  
	height:30px;  
	font-size:12px;  
	font-weight:bold;  
	background:transparent url(images/nav_bg.png) repeat-x top left;  
	font-family:Arial, Helvetica, sans-serif;  
	border-bottom:1px solid #000000;  
	border-top:1px solid #000000;  
}  
  
ul#menu li  
{  
	display:block;  
	float:left;  
	margin:0;  
	padding:0;  
}  
	  
ul#menu li a  
{  
	display:block;  
	float:left;  
	color:#999999;  
	text-decoration:none;  
	font-weight:bold;  
	padding:8px 20px 0 20px;  
}  
	  
ul#menu li a:hover  
{	  
	color:#FFFFFF;  
	height:22px;  
	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;		  
}  
	  
  
ul#menu li a.current  
{  
	display:inline;  
	height:22px;  
	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;	  
	float:left;  
	margin:0;  
}  

::::Und der Code den ich in der HTML Kopiert habe::::

<div>  
	<ul id='menu'>  
	<li class="button"><a class='current' href='http://' >Home</a></li>  
	<li class="button"><a href='http://'  >Products</a></li>  
	<li class="button"><a href='http://'  >Support</a></li>  
	<li class="button"><a href='http://'  >Contact</a></li>  
	</ul>  
</div><!-- Ende Menü -->

::::So sollte es aussehen::::

::::Aber so sieht es aus::::

Woran liegt das? Ich hoffe ihr könnt mir helfen!