Estoy intentando crear una barra de navegación horizontal (no desplegable, solo una lista horizontal), pero tengo problemas para encontrar la mejor manera de agregar divisores verticales entre los elementos del menú.

El HTML real es el siguiente:

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

El CSS actual es el siguiente:

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

Entre cada elemento del menú quiero una imagen pequeña como divisor vertical, excepto que no quiero que se muestre un divisor antes del primer elemento y no quiero que se muestre un divisor después del segundo elemento.

El resultado final debe verse algo como esto:

Artículo 1 | Artículo 2 | Artículo 3 | Artículo 4 | Ítem ​​5

Simplemente reemplazando el tubo con una imagen real.

He intentado diferentes maneras - He intentado configurar ellist-style-image propiedad, pero la imagen no se mostró. También he intentado configurar el divisor como un fondo que en realidad funcionó más o menos, excepto que hizo que el primer elemento tuviera un divisor delante.