Próbuję utworzyć poziomy pasek nawigacyjny (bez listy rozwijanej, tylko lista pozioma), ale mam problem ze znalezieniem najlepszego sposobu dodania pionowych dzielników między elementami menu.

Rzeczywisty HTML wygląda następująco:

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

Aktualny CSS wygląda następująco:

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

Pomiędzy każdym elementem menu chcę mały obraz jako pionowy dzielnik, z wyjątkiem tego, że nie chcę, aby dzielnik był pokazany przed pierwszym elementem, a nie chcę, aby dzielnik był wyświetlany po drugim elemencie.

Wynik końcowy powinien wyglądać mniej więcej tak:

Pozycja 1 | Pozycja 2 | Pozycja 3 | Pozycja 4 | Pozycja 5

Wystarczy zastąpić rurę rzeczywistym obrazem.

Próbowałem różnych sposobów - próbowałem ustawićlist-style-image nieruchomość, ale obraz nie pojawił się. Próbowałem również ustawić dzielnik jako tło, które w rzeczywistości działało mniej więcej, z tym wyjątkiem, że powodowało, że pierwszy element miał przed sobą dzielnik.