Laatste border streepje niet tonen in CSS Menu

[lady johnny]

Ik heb een heel eenvoudig menu, en de items worden gescheiden door een | een border van 1px.
Nu toont ie na het laatste menuknopje ook een | en eerlijk gezegd staat dit niet mooi.
Hoe dat laatste streepje weg te halen?

Code:
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
<li><a href="#">Pagina 4</a></li>
<li><a href="#">Pagina 5</a></li>
</ul> </div>

#menu {
width: 1080px;
height: 32px;
margin-left: 5px;
margin-top: 5px;
background-color: #8fbaf1;
text-align: center;
background-image: url(../Images/menu.jpg);
background-repeat: repeat-x;
}

#menu ul{
list-style: none;
padding: 6px 0 0 0;
margin: 0;
}

#menu li{
display: inline;
margin: 0 0 0 0;
border-right: 1px solid #ffffff;
}

#menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
padding: 0 16px 0 15px;
}

#menu a:link, a:visited{
color: #ffffff;
}

#menu a:hover, a:active{
color: #ffffff;
}

 

[That Guy]

Je kan bijvoorbeeld het laatste <li> item een class 'geenstreep' geven, en dan zoiets toevoegen:

#menu li.geenstreep
{
   border-right: 0;
}

Wat ook kan is met CSS3's last-child selector gaan klooien, maar dat maakt het er niet makkelijker op.


:thumb:

 

[lady johnny]

Bedankt, is opgelost!

Iets dergelijks had ik ook al geprobeerd, alleen deed ik de a class ipv de li class, zie nu ook in dat dat niet gaat werken