Menu en onglet CSS. Pb <li> différentes

Bonjour,
Je suis en train de faire un menu en onglet avec du CSS. Aimant bien compliquer les choses, je souhaite avoir des images différentes pour chaque onglet, et ainsi me passer de texte. Jusque là tout va bien. Dreamweaver me fais apparaitre le resultat voulu, mais lorsque je fais un apercu sous IE7, seul la première <li> se repète.

Mon CSS:

ul {
	list-style: none;
	padding: 0;
	margin: 0
}

ul li {
	float: left
}
ul li a {
	display: block;
	height: 39px;
	width: 62px;
	padding-top: 0px;
	text-align: center;
	background: url('bouton/1.jpg') bottom;
}
ul li a:hover {
	background-position: top;
	color: #fff
}
ul li#2 a {
	display: block;
	height: 39px;
	width: 132px;
	padding-top: 0px;
	text-align: center;
	background: url('bouton/2.jpg') bottom;
}
ul li#2 a:hover {
	background-position: top;
	color: #fff
}
ul li#3 a {
	display: block;
	height: 39px;
	width: 148px;
	padding-top: 0px;
	text-align: center;
	background: url('bouton/3.jpg') bottom;
}
ul li#3 a:hover {
	background-position: top;
	color: #fff

mon HTML:

<ul>
	<li><a href="index.htm"> </a></li>
	<li id="2"><a href="#"> </a></li>
	<li id="3"><a href="#"> </a></li>
</ul>

Et le problème se retrouve en local, comme en ligne.
Merci de m'aider, je ne trouve aucun sujet se rattachant au mien.

Configuration: Windows XP
Internet Explorer 7.0