Divisores verticais no menu horizontal da UL
Eu estou tentando criar uma barra de navegação horizontal (sem lista suspensa, apenas uma lista horizontal), mas estou tendo problemas para encontrar a melhor maneira de adicionar divisores verticais entre os itens de menu.
O HTML real é o seguinte:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
O CSS atual é o seguinte:
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
Entre cada item de menu, quero uma pequena imagem como um divisor vertical, exceto que não quero um divisor mostrado antes do primeiro item e não quero um divisor mostrado após o segundo item.
O resultado final deve ser algo como isto:
Item 1 | Item 2 | Item 3 | Item 4 | Item 5
Apenas substituindo o tubo por uma imagem real.
Eu tentei maneiras diferentes - eu tentei definir olist-style-image
propriedade, mas a imagem não apareceu. Eu também tentei definir o divisor como um plano de fundo que, na verdade, mais ou menos funcionou, exceto que ele fez o primeiro item ter um divisor na frente dele.