Вертикальные разделители в горизонтальном меню UL ⇐ CSS

[Anonymous]

Я пытаюсь создать горизонтальную панель навигации (без раскрывающегося списка, только горизонтальный список), но не могу найти лучший способ добавить вертикальные разделители между пунктами меню.
Фактический HTML-код выглядит следующим образом:

Код: Выделить всё

[list]
[*]Item 1
[*]Item 2
[*]Item 3
[*]Item 4
[*]Item 5
[/list]

Текущий CSS выглядит следующим образом:

Код: Выделить всё

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

Между каждым пунктом меню мне нужно небольшое изображение в качестве вертикального разделителя, за исключением того, что я не хочу, чтобы разделитель отображался перед первым элементом, и я не хочу, чтобы разделитель отображался после последний элемент.
Конечный результат должен выглядеть примерно так:

Пункт 1 | Пункт 2 | Пункт 3 | Пункт 4 | Пункт 5.

Просто заменил трубу реальным изображением.
Я пробовал разные способы — я Я попытался установить свойство list-style-image, но изображение не появилось. Я также попробовал установить разделитель в качестве фона, что на самом деле более или менее сработало, за исключением того, что перед первым элементом был разделитель.

Подробнее здесь: https://stackoverflow.com/questions/193 ... al-ul-menu