Vertical dividers on horizontal UL menu

Question

Hi,

I'm trying to create a horizontal navigation bar(No dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items.

The actual html is as follows:

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>

The current css is as follows:

.menu li { display: inline; margin-left: 25px; padding-left: 25px; }

Between each menuitem i want a small image as a vertical divider, except that i dont want a divider shown before the first item and i dont want a divider shown after the second item.

The end result should look something like this:

Item 1 | Item 2 | Item 3 | Item 4 | Item 5

Just replacing the pipe with an actual image.

I've tried different ways - I've tried setting the list-style-image property but the image didn't show up. I've also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.

Answer 1

I think your best shot is a border-left property that is assigned to each one of the lis except the first one (You would have to give the first one a class named first and explicitly remove the border for that).

Even if you are generating the <li> programmatically, assigning a first class should be easy.

Answer 2

This can also be done via CSS:pseudo-classes. Support isn't quite as wide and the answer above gives you the same result, but it's pure CSS-y =)

IE:

.ULHMenu li { border-left: solid 2px black; } .ULHMenu li:first-child { border: 0px; }

OR:

.ULHMenu li { border-right: solid 2px black; } .ULHMenu li:last-child { border: 0px; }

See: http://www.quirksmode.org/css/firstchild.html Or: www w3schools com/css/pr_pseudo_first-child.asp

Answer 3

.last { border-right: none

.last { border-right: none !important; }