removing last item of list nav border

Question

im struggling to remove the "pipe" border i have on the last item of the nav list- my code-

<div id="header">
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Stories</a></li>
        <li><a href="">Tell your story</a></li>
        <li><a href="">Prizes</a></li>
        <li><a href="">How to tips</a></li>
    </li>
</div>

And my css

#menu li{
    float:left;
    list-style-type: none;
    display:inline;
    padding:0 .9em;
    border-right:1px solid #d2d2d2;;
}
#menu li.last{
    border-right:none;
}

Answer 1

You could use the adjacent sibling selector to only set a left border for those li elements that have a preceding li sibling:

#menu li {
    float: left;
    list-style-type: none;
    display: inline;
    padding: 0 .9em;
}
#menu li + li {
    border-left: 1px solid #d2d2d2;
}