[Solved] Image roll-overs - too many hovers showing up

Hi there,

I'm trying to make my image roll-overs work properly. I've tested in IE, FF, and Safari and get different results in each; FF being the best. Here's the problem:

When hovering over the first nav button, it looks fine. Hover over button number 2, and both 2 & 3 light up. Hover over the third button, and 3, 4, and 5 light up. Et cetera. In Safari some extra hover buttons appear to repeat across and out of view (not supposed to).

Here's a link to the page:

http://www.digitalpawprint.com/test.html

Please ignore the comments (on the site) saying that I had a breakthrough... that was from an earlier problem I'd solved.

Here's the CSS code that has related info:

#menu 
{ width: 567px; height: 70px; background: url(./images/menu.gif); margin: 10px auto; padding: 0; position: relative; }
	
#menu li
{ margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
	
#menu li, #menu a
{ height: 70px; display: block; text-indent: -9999px; text-decoration: none; }
	
#homemenu
{ left: 0; width: 70px; }
	
#servicesmenu
{ left: 71px; width: 141px; }
	
#aboutmenu
{ left: 142px; width: 212px; }
	
#portfoliomenu
{ left: 213px; width: 283px; }
	
#contactmenu
{ left: 284px; width: 354px; }
	
#vaultmenu
{ left: 355px; width: 420px; }
	
#infomenu
{ left: 426px; width: 496px; }
	
#linksmenu
{ left: 497px; width: 567px; }
	
#homemenu a:hover
{ background: transparent url(./images/menu.gif) 0 -70px no-repeat; }
	
#servicesmenu a:hover
{ background: transparent url(./images/menu.gif) -71px -70px no repeat; }
	
#aboutmenu a:hover
{ background: transparent url(./images/menu.gif) -142px -70px no-repeat; }
	
#portfoliomenu a:hover
{ background: transparent url(./images/menu.gif) -213px -70px no-repeat; }
	
#contactmenu a:hover
{ background: transparent url(./images/menu.gif) -284px -70px no-repeat; }
	
#vaultmenu a:hover
{ background: transparent url(./images/menu.gif) -355px -70px no-repeat; }
	
#infomenu a:hover
{ background: transparent url(./images/menu.gif) -426px -70px no-repeat; }
	
#linksmenu a:hover
{ background: transparent url(./images/menu.gif) -497px -70px no-repeat; }

I hope I posted this okay... it's my first time posting something here and I read through the rules and suggestions and want to do things right to ensure I don't potentially annoy anyone that might help me.

Thanks!

Jenn