Menu Separators

I would like to display a vertical bar between horizontal menu items, similar to the way it's done at the top of this page:

and I don't want it to appear after the last item as it does using the latter method. Am I missing the right/easy way to do this?

Re: Menu Separators

The HTML for the links at the top of the post are very simple:

<li><span class="separator">|</span><a data-uitype="markasanswer" data-postid="4975414" style="cursor:pointer">Mark As Answer</a>
<li><span class="separator">|</span><a href="/post/edit/4975414">Edit</a></li></li>

As you can see, the pipe | character is included in the HTML. It also includes the CSS class "separator" which has padding to make it look pretty. Here is the CSS for that:

.separator {
padding: 0 10px;
color: #BEBEBE;
}

Re: Menu Separators

thanks for your reply nut it does not work please check my code and tell me what is the problem. Please

<asp:Menu ID="Menu2" runat="server" Font-Bold="True" Font-Names="Arial Black"
                        Font-Size="Large" ForeColor="White" ItemWrap="True" Orientation="Horizontal"
                       CssClass="separator">
                        <Items>
                            <asp:MenuItem Text="  " Value="commonquestion"></asp:MenuItem>
                            <asp:MenuItem Text=" " Value="Branches"></asp:MenuItem>
                            <asp:MenuItem Text=" " Value="activity"></asp:MenuItem>
                            <asp:MenuItem Text=" " Value="about Org"></asp:MenuItem>
                            <asp:MenuItem Text="" Value="Main"></asp:MenuItem>
                        </Items>
                        <StaticMenuItemStyle HorizontalPadding="21px" VerticalPadding="50px" />
                    </asp:Menu>