Poziome menu z separatorami 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 
    	<div id="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 

Z góry dziękuję za pomoc