Problem med skalning och hover av bild

Hej hej,

Jag har nu när jag håller på med ett skolprojekt (som egentligen inte preliminärt har med webbsidor att göra) valt att använda en bild till menyraden, och vill då använda mig av hover för att visa för användaren att man har muspekaren över menyvalet. Det här i sig är inget problem, utan problemet kommer i att jag vill skala allt till att fylla 100% av fönstret (all design gjordes i dokument med 1920px i bredd). Det här går väldigt bra för bannern, som anpassar sig helt okej, dock vill det inte fungera för menyn, som, om den skalar sig, klipper bort vissa delar av bannern. Efter lite experimenterande kom jag fram till att den verkar vilja ha en specifik höjd och bredd, vilket beror på sättet hovern används. Så till frågan: är det möjligt att skala även menyraden till webbläsarens storlek, eller ska jag lösa det här på ett helt annat sätt?

Bifogar en Bild för att visa hur det ser ut när man inte är i 1080p just nu:

Som synes är bannern anpassad till upplösningen på min bärbara (som används för att testa skalningen (1440x900)), men inte menybaren, i det här fallet för att den är skriven till att vara 1920 bred, men om den ändras till % blir det vitt vid menyn....

Kod från CSS-filen (style.css) finns bifogad nedan.

@charset "UTF-8";

img {
	max-width:100%;
}

#nav {
	background:url("images/navbar.png") no-repeat;
	/*background-size: 100%;*/
	width:1920px;
	height:100px;
	margin:0;
	padding:0;
}

#nav span {
display:none;
}

#nav li, #nav a {
height:87px;
display:block;
}

#nav li {
float:left;
list-style:none;
display:inline;
}

/*#nav-01 {width:16%;}
#nav-02 {width:17%;}
#nav-03 {width:18%;}
#nav-04 {width:18%;}
#nav-05 {width:17%;}
#nav-06 {width:14%;}*/

#nav-01 {width:306px;}
#nav-02 {width:322px;}
#nav-03 {width:343px;}
#nav-04 {width:343px;}
#nav-05 {width:318px;}
#nav-06 {width:267px;}

#nav-01 a:hover {background:url("images/navbar.png") 0px -97px no-repeat;}
#nav-02 a:hover {background:url("images/navbar.png") -306px -97px no-repeat;}
#nav-03 a:hover {background:url("images/navbar.png") -628px -97px no-repeat;}
#nav-04 a:hover {background:url("images/navbar.png") -971px -97px no-repeat;}
#nav-05 a:hover {background:url("images/navbar.png") -1314px -97px no-repeat;}
#nav-06 a:hover {background:url("images/navbar.png") -1632px -97px no-repeat;}

#banner {
max-width:100%;
}

#wrapper {
max-width:1920px; /*funkar även med 100%*/
}

EDIT: Filen jag använder till menyn ser ut så här: