Menu met tussenstreepjes

Op een nieuw te maken website heeft de vormgeefster leuk van die tussenstreepjes in het menu verzonnen. Van die streepjes | die je niet met een border kunt maken omdat ze dan te hoog worden.

Het menu is een ongeordende list (UL). Het is een WordPress websites en actieve elementen krijgen een eigen class. De streepjes zitten alleen tussen twee items in. Het begin en het eind van het menu kent dus geen streepje.
Ik heb gekozen om content in het list-element te gebruiken, en wel een | voor hetmenu-item

[css]#nav li:before {
content:"|";
}[/css]

Links van elk menu-item komt nu een streepje. Maar dus ook voor het eerste. Dat is ongedaan te maken met een uitzondering voor het eerste menu-item:

[css]#nav li:first-child:before {
content:none;
}[/css]

Dit geeft echter problemen zodra je het actieve item een achtergrond gaat geven. De streepjes vallen dan net buiten het witte vlak. Niet alleen het streepje moet weg bij het actieve menu-item, ook het streepje bij het menu-item rechts van het actieve item. Ik maak hierbij gebruik van css3, de + waarbij ik aangeef dat het eerste element na de li.current-menu-item ook een zwart streepje moet krijgen:

[css]#nav li.current-menu-item:before,
#nav li.current-menu-item+li:before {
color:#000;
}[/css]

Ik heb hier voor een zwart streepje gekozen, omdat bij verwijderen van het streepje je kleine verschuivingen kreeg binnen het menu.

Het werkt in alle browsers, behalve in Internet Explorer 7 – maar daar werkt ‘content’ niet. De | in het menu zijn dan niet aanwezig.

Het is mij niet gelukt om hier ‘border’ te gebruiken. Tips om wel gebruik te maken van ‘border’ zijn natuurlijk van harte welkom.