Ich versuche, eine horizontale Navigationsleiste zu erstellen (kein Dropdown, nur eine horizontale Liste), habe jedoch Probleme, die beste Methode zum Hinzufügen vertikaler Trennlinien zwischen den Menüelementen zu finden.

Der eigentliche HTML-Code lautet wie folgt:

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

Das aktuelle CSS lautet wie folgt:

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

Zwischen jedem Menüpunkt möchte ich ein kleines Bild als vertikale Trennlinie, mit der Ausnahme, dass vor dem ersten Punkt keine Trennlinie und nach dem zweiten Punkt keine Trennlinie angezeigt werden soll.

Das Endergebnis sollte ungefähr so ​​aussehen:

Punkt 1 | Punkt 2 | Punkt 3 | Punkt 4 | Punkt 5

Ersetzen Sie einfach das Rohr durch ein tatsächliches Bild.

Ich habe verschiedene Möglichkeiten ausprobiert - ich habe versucht, dielist-style-image Eigentum, aber das Bild wurde nicht angezeigt. Ich habe auch versucht, den Teiler als Hintergrund festzulegen, was mehr oder weniger funktioniert hat, mit der Ausnahme, dass das erste Element einen Teiler vor sich hat.