CSS menu problem

Hello,

I have a horizontal menu. it consists of a menu.gif which has three layers that are main menu, hover menu, and visited menu images.

i have 4 sections
home – id=1
archives – id=2
news – id=3
contact – id=4

the problem with this code is only the home button (id=1) works when the link is visited, sections 2(archive), 3(news) and 4(contact) when i click on them are not displayed as if they are visited.

im basically trying to show what section of the blo the visitors are on. i achieved it with first button but not 2, 3 and 4. could someone please point out where the problem is?

Thank you ver much.

HTML codes

<ul id="menu">
		      <li id="1"><a href="https://localhost/wordpress/" linkindex="1">home</a></li>
		  <li id="2"><a href="https://localhost/wordpress/?page_id=2" linkindex="2">archives</a></li>
		    <li id="3"><a href="https://localhost/wordpress/?page_id=3" linkindex="3">news</a></li>
<li id="4" class="last"><a href="https://localhost/wordpress/?page_id=4" linkindex="4">contact</a></li>
		</ul>

CSS codes

#menu {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#menu li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#menu li.last { padding: 0; }

		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#menu li#1 a, ul#menu li#1 a:visited { background-position: 0 0; }	

			ul#menu li#2 a, ul#menu li#2 a:visited { background-position: -84px 0; }

			ul#menu li#3 a, ul#menu li#3 a:visited { background-position: -168px 0; }

			ul#menu li#4 a, ul#menu li#4 a:visited { background-position: -252px 0; }

				ul#menu li#1 a:hover { background-position: 0 -30px; }

				ul#menu li#2 a:hover { background-position: -84px -30px; }

				ul#menu li#3 a:hover { background-position: -168px -30px; }

				ul#menu li#4 a:hover { background-position: -252px -30px; }

			.1 ul#menu li#1 a, .1 ul#menu li#1 a:visited, .1 ul#menu li#1 a:hover { background-position: 0 -60px; cursor: default; }

			.2 ul#menu li#2 a, .2 ul#menu li#2 a:visited, .2 ul#menu li#2 a:hover { background-position: -84px -60px; cursor: default; }

			.3 ul#menu li#3 a, .3 ul#menu li#3 a:visited, .3 ul#menu li#3 a:hover { background-position: -168px -60px; cursor: default; }

			.4 ul#menu li#4 a, .4 ul#menu li#4 a:visited, .4 ul#menu li#about a:hover { background-position: -252px -60px; cursor: default; }