Hello everyone,

I've been trying to assemble the menu of my site but I've been trying for hours and no success. I've tried to give an id to an li element and assign a background to that li element. Then when you hover ove rthe link, there should be another image. So after hours of trying stuff I'm coming to these forums and hoping someone can help me. I'll post some code:

Code:
#navigation { 
	text-align: center;
	
	height: 38px;
	width: 1024px;
	color: #0a0a0a;
	

 


	background:  url(../images/menu.png) no-repeat;
}

 #navigation ul { 
	 
	padding-top : 20px; 
	list-style : none; 
	border: none;
}
	
 #navigation li { 
	display: inline;
	
}
/*Navigation items*/
 #navigation li#home a {
	color: #0a0a0a;	
	font-weight: bold;	
	height: 69px;
	width: 25px;
	background: transparent url(../images/homenormal.png) no-repeat fixed;
	text-indent: -9009px;
	margin: 0 0 0 8px;
	text-decoration: none;
}

 #navigation li#home a:hover{
	background: url(../images/homeover.png) no-repeat fixed;
	height: 69px;
	width: 25px;
	text-indent: -9009px;
	margin: 0 0 0 8px;
	text-decoration: none;
}
Code:
<div id="navigation">
<ul>
<li id="home"><a href="index.html">Home</a></li>
<li id="bio"><a href="pages/bio.html">Biography</a></li>
<li id="band"><a href="pages/band.html">Band</a></li>
<li id="links"><a href="pages/links.html">Links</a></li>
<li id="pictures"><a href="pages/pictures.html">Pictures</a></li>
<li id="contact"><a href="pages/contact.html">Contact</a></li>
<li id="gigs"><a href="pages/gigs.html">Gigs</a></li>
<li id="setlist"><a href="pages/setlist.html">Setlist</a></li>
</ul>

</div>
I hope anyone knows what I'm doing wrong.