Menu orizzontale con css sprite

[HeMp4EvEr]

Buongiorno,
vi scrivo in quanto ho un problema con i css che nn riesco a risolvere.
Mi spiego meglio: devo realizzare un menù orizzontale di 970x40 composto da 8 pulsanti (ne ho allegato uno, gli altri sono simili) + un'ultima parte della barra x ora senza nulla.

Il codice Css da me scritto è il seguente:

#navigation {
 width: 970px;
 height:40px;
 background: #eaef55;
 text-align:left;
}

#navigation_menu {
 width: 640px; 
 height: 40px; 
 margin: 0; 
 padding: 0;  
 float: left;
}


#menu_news 	        {float:left; width:80px; height:40px; background:url(img/menu_button/news.png) 0 0;}
#menu_news a		{float:left; width:80px; height:40px; background:url(img/menu_button/news.png) 0 -80;}
#menu_news a:hover	{background:url(images/menu_button/news.png) 0 -40px;}

#menu_team		{float:left; width:80px; height:40px; background:url(img/menu_button/teams.png) 0 -80;}
#menu_team a		{float:left; width:80px; height:40px; background:url(img/menu_button/teams.png) 0 0;}
#menu_team a:hover	{background:url(images/menu_button/teams.png) 0 -40px;}

#menu_cw		{float:left; width:80px; height:40px; background:url(img/menu_button/cw.png) 0 -80;}
#menu_cw a		{float:left; width:80px; height:40px; background:url(img/menu_button/cw.png) 0 0;}
#menu_cw a:hover	{background:url(images/menu_button/cw.png) 0 -40px;}

#menu_forum		{float:left; width:80px; height:40px; background:url(img/menu_button/forum.png) 0 -80;}
#menu_forum a		{float:left; width:80px; height:40px; background:url(img/menu_button/forum.png) 0 0;}
#menu_forum a:hover	{background:url(images/menu_button/forum.png) 0 -40px;}

#menu_download		{float:left; width:80px; height:40px; background:url(img/menu_button/download.png) 0 -80;}
#menu_download a	{float:left; width:80px; height:40px; background:url(img/menu_button/download.png) 0 0;}
#menu_download a:hover	{background:url(images/menu_button/download.png) 0 -40px;}

#menu_sponsors		{float:left; width:80px; height:40px; background:url(img/menu_button/sponsors.png) 0 -80;}
#menu_sponsors a	{float:left; width:80px; height:40px; background:url(img/menu_button/sponsors.png) 0 0;}
#menu_sponsors a:hover	{background:url(images/menu_button/sponsors.png) 0 -40px;}

#menu_aboutus		{float:left; width:80px; height:40px; background:url(img/menu_button/aboutus.png) 0 -80;}
#menu_aboutus a		{float:left; width:80px; height:40px; background:url(img/menu_button/aboutus.png) 0 0;}
#menu_aboutus a:hover	{background:url(images/menu_button/aboutus.png) 0 -40px;}

#menu_contact		{float:left; width:80px; height:40px; background:url(img/menu_button/contact.png) 0 -80;}
#menu_contact a	        {float:left; width:80px; height:40px; background:url(img/menu_button/contact.png) 0 0;}
#menu_contact a:hover	{background:url(images/menu_button/contact.png) 0 -40px;}

#navigation_s {float: left; width: 330px; margin: 0; padding: 0; height: 43px; background: #eae427;}

Mentre il codice Html:

<div id="navigation">
 <div id="navigation_menu">
  <div id="menu_news"></div>
  <div id="menu_team"></div>
  <div id="menu_cw"></div>
  <div id="menu_forum"></div>
  <div id="menu_download"></div>
  <div id="menu_sponsors"></div>
  <div id="menu_aboutus"></div>
  <div id="menu_contact"></div>
 </div>
 <div id="navigation_s"></div>
</div>

I 3 stati del pusante sono normale (1° dal basso), hover (2° dal basso) e active (3° dal basso), dove ho sbagliato???