Question

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

<ul>
    <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,

Answer 1

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.