Vertical dividers on horizontal UL menu

Question

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 menu item I want a small image as a vertical divider, except that I don't want a divider shown before the first item and I don't 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

Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:before is great!). But this is by far the cleanest and most proper way to do this, at least in my opinion it is.

#navigation ul {     margin: 0;     padding: 0; }  #navigation ul li {     list-style-type: none;     display: inline; }  #navigation li:not(:first-child):before {     content: " | "; } 

Now just use a simple unordered list in HTML and it'll populate it for you. HTML should look like this:

<div id="navigation">     <ul>         <li><a href="#">Home</a></li>         <li><a href="#">About Us</a></li>         <li><a href="#">Support</a></li>     </ul> </div><!-- navigation --> 

The result will be just like this:

HOME | ABOUT US | SUPPORT

Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It's all automated and works great!