Rozjeżdżające się menu przy powiększaniu/pomniejszaniu strony

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png')}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding: 0 0 0 17.5px; display:block;  color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(0,0,0);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

#bar_top {
	margin: 0 30px 10px 30px;
	width: 840px;
	height: 60px;
	overflow: hidden;

Jest to wygenerowane menu w css przez jakąś stronę internetową. Umiejscowiłem je w divie bar_top, który jest zagnieżdżony w 2. innych divach. Przy powiększaniu lub pomniejszaniu strony ostatni z przycisków przenosi się do kolejnego wiersza, a tam gdzie powinien być ostatni przycisk pozostaje czysty background. Jest on tylko we właściwej pozycji przy 100% oglądaniu na przeglądarce. Nie miałem większej styczności z css, stąd moja bezradność. Proszę o pomoc :)

dodanie znacznika <code class="css"> - @furious programming