CSS - Menu using <ul>

Im in the process of doing my first cutup from PSD to HTML im having a problem styling a menu though.

I have the following code

<开发者_如何学Cul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
</ul>

What i want to do is style it like the following

Home  |  About  |  Contact

How is it possible to get the | inbetween the elements except before the first?

Im quite confused, any help would be great.

Cheers,

---

This should do the trick:

li { 
list-style-type: none; 
display: inline; 
border-left: 1px solid black; 
padding-left: 10px; 
margin-left: 10px;
}
ul li:first-child {
border-left: none;
}

You may notice slight spacing issues in some browsers - meaning the 10px doesn't seem to be the same on each side. You can also float:left each li to remove this, but you'll have to then clear the float after, or have a fixed width and overflow:hidden on the parent container.

---

 li + li::before {
   content: " | ";
 }

---

You should add an id or class to the <ul> so the CSS rules don't affect every other <ul> in the website. Also, the following CSS rules are more suitable as they also work in browsers that don't support :first-child and ::before.

HTML:

<ul id="menu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
</ul>

CSS:

ul#menu {
    margin:0;
    padding:0;
    overflow:hidden;
}
ul#menu li {
    float:left;
    padding:0 2em;
    margin-left:-1px;
    border-left:1px solid #333;
}

---

Demo: jsfiddle.net/Marcel/gqJWm