title: Vertical dividers on horizontal UL menu
body: <p>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.</p>
  <p>The actual HTML is as follows:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;li&gt;Item 4&lt;/li&gt;
    &lt;li&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>The current CSS is as follows:</p>
  <pre class="lang-css prettyprint-override"><code>.menu li {
    display: inline;
    margin-left: 25px;
    padding-left: 25px;
  }
  </code></pre>
  <p>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.</p>
  <p>The end result should look something like this:</p>
  <blockquote>
  <p>Item 1  |  Item 2  |  Item 3  | Item 4  | Item 5</p>
  </blockquote>
  <p>Just replacing the pipe with an actual image.</p>
  <p>I've tried different ways - I've tried setting the <code>list-style-image</code> 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.</p>