[CSS]Separator w menu Opcje

[ponki]

Witam,

Proszę o sprawdzenie poniższego stylu css i kodu html

Próbuje zrobić poziome menu podzielone separatorami. Ważne aby separatory były na początku i na końcu menu, a po kliknięciu w daną podstronę separatory sąsiadujące pogrubiały się.

Niby wszystko jest ok ale jak kliknę w przedostatni link to ginie mi separator na końcu.

Z góry dziękuję za pomoc, bo siedzę nad tym dłuższy czas i nie mogę sobie poradzić.

[HTML] pobierz, plaintext 
	<divid="mainMenu">
			<ul>
				<li><a href="1.html">1</a></li>
				<li><a href="2.html">2</a></li>
				<li><a href="2.html">3</a></li>
				<li><a href="3.html">4</a></li>
				<li><a href="4.html">5</a></li>
			</ul>
		</div>
[HTML] pobierz, plaintext 

CSS

[HTML] pobierz, plaintext 
#Menu {
	margin-bottom: 10px;
}
#Menu ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#Menu li {
	float: left;
	width: 40%;
	background: url('../img/sep.jpg') left top no-repeat;
	text-align: center;
}
#Menu li.active {
	background: url('../img/sep2.jpg') left top no-repeat;
}
#Menu li:last-child {
	background: url('../img/sep.jpg'), url('../img/sep.jpg');
	background-repeat: no-repeat;
	background-position: left top, right top;
}
#Menu li:last-child.active {
	background: url('../img/sep2.jpg'), url('../img/sep2.jpg');
	background-repeat: no-repeat;
	background-position: left top, right top;
}
#Menu li.active + li {
	background: url('../img/sep2.jpg') left top no-repeat;
}
 
[HTML] pobierz, plaintext