Insérer symbole entre les entrées d'un menu horizontal

salut, débutant en css, j'utilise le cms Website Baker. J'ai une feuille de style pour la navigation.
Comment insère-t-on en css un tiret vertical entre chaque entrée d'un menu horizontal?
Voici mon code css:

body {
background-color : #fdfffc;
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 10pt;
padding : 0;
margin-top : 20px;

}
#nav {
width : 980px;
height : 25px;
border-top : 5px solid black;
background-color : #c59856;
position : relative;
top : 0;
margin : 0;
margin-top : 0;
margin-bottom : 0;
padding-left : 0;
text-align : right;
}
#nav li {
display : inline;
height : 20px;

}
#nav li a {
padding-left : 19px;
padding-right : 12px;
color : white;
text-decoration : none;
font : normal normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#nav li a:hover
{
	color: #050100;
}

#main {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 9pt;
width : 980px;
margin-left : auto;
margin-right : auto;
border-right : 1px solid #666666;
border-left : 1px solid #666666;
}
#hero {
margin : 0;
width : 200px;
height : 92px;
background-image : url(../../media/jurgschat-banner2.jpg);
background-repeat : no-repeat;
float : left;
}
#hero2 {
margin : 0;
margin-left : 400px;
height : 85px;
background-image : url(../../media/top-banner-effekt3.png);
background-repeat : no-repeat;
}
.gear {
width : 970px;
height : 2px;
margin-top : 0;
margin-left : 5px;
}
#header h1 {
position : absolute;
left : 74px;
top : 8px;
color : white;
font-size : 48px;
font-weight : bold;
margin : 0;
}
#header em {
font-style : normal;
text-decoration : underline;
}
#wrapper {
padding-top : 0;
background-color : white;
position : relative;
}
#wrapper:after {
content : '.';
display : block;
height : 0;
clear : both;
visibility : hidden;
}
#wrapper {
display : inline-block;
}
#wrapper {
display : block;
}
#sidebar {
float : left;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;

padding : 10px 10px 20px 10px;
width : 160px;
height : 450px;
}
#aktuelles {
float : right;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;

padding : 10px 10px 20px 10px;
width : 160px;
height : 450px;
	background: url(../../media/business-people.jpg) no-repeat center center;
}
#aktuelles h4 {
background-color : #ae8055;
color : #fff6fd;
}
#sidebar h3 {
font-size : 18px;
border-bottom : 1px solid black;
margin-bottom : 4px;
margin-top : 16px;
clear : both;
}
#sidebar ul {
margin-left : 1em;
padding-left : 0;
}
#sidebar p {
margin-bottom : 8px;
}
#sidebar div.subtabs ul {
list-style : none;
width : 155px;
margin : 0;
padding : 0;
}
#sidebar div.subtabs ul ul {
list-style : none;
width : 130px;
margin : 0;
padding : 0 0 0 5px;
}
#sidebar div.subtabs ul ul ul {
list-style : none;
width : 125px;
margin : 0;
padding : 0 0 0 5px;
}
#sidebar div.subtabs ul a {
width : 100%;
margin : 3px;
text-align : left;
font-size : 0.9em;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight : normal;
text-decoration : none;
display : block;
padding : 3px 3px 3px 5px;
border-bottom : 1px solid #d8d8d8;
border-left : 4px solid #cccccc;
}
#sidebar div.subtabs ul a:hover {
text-decoration : none;
background : #eaeaea url(img/menubg2.gif) repeat-x bottom left;
color : #957139;
border-left : 4px solid #a31e00;
}
#content {
margin : 0 0 0 180px;
min-height : 310px;
height : auto !important ;
height : 300px;
width : 600px;
display : block;
position : relative;
padding : 0 3px 20px 10px;
color : #333333;
}
#content h1 {
font-size : 20px;
margin : 0;
text-decoration : underline;
}
#content h2 {
font-size : 18px;
margin : 0;
text-decoration : underline;
}
#content .date {
float : right;
}
#content .postedBy {
float : left;
}
#content .meta {
height : 1em;
}
#content p {
text-align : justify;
text-indent : 1em;
line-height : 1.3em;
}
.comments {
border-top : 1px dotted #666666;
border-bottom : 1px dotted #666666;
padding : 4px;
text-align : right;
margin-bottom : 2em;
background-image : url(images/comment_edit.gif);
background-repeat : no-repeat;
background-position : center left;
}
a {
color : #666666;
}
.pullout {
background-color : #eeeeee;
padding : 5px;
float : right;
margin : 8px;
}
#footer {
width : 980px;
height : 45px;
padding-top : 0;
padding-bottom : 0;
margin-left : auto;
margin-right : auto;
color : #b0b0b0;
text-align : center;
}
.right {
float : right;
}
.csskeyword {
color : blue;
}
.cssvalue {
color : red;
}
p.caption {
text-align : center;
}
small.super {
vertical-align : top;
font-size : 0.75em;
line-height : 1.3em;
}
.nodisplay {
display : none;
}

Merci

Bonjour midiweb,

Il y a bien les pseudo-éléments after/before couplés à la propriété content que tu pourrais utiliser comme ceci par exemple :

#nav li a:after { content: " | " }

Mais IE ne l'implémente pas

Le mieux est peut-être de placer ce "tiret vertical" dans le code html ?

Il y avait un sujet interessant sur le forum mais je ne le retrouve pas

Cdt,
Sylvain

dans le code HTML cela ne va pas puisque c'est du cms. On ne sait pas à l'avance ce qui sera rajouté comme entrée, tu comprends.
Je devine bien ce que tu veux dire mais je préfère en css, question de commodité.
Par ex. si on ajoute trois nouvelles entrées, le tiret est automatiquement généré.
Je vais essayer ta commande css.
A+
Modifié par midiweb (27 May 2008 - 13:33)

a écrit :
dans le code HTML cela ne va pas puisque c'est du cms.

Hum hum ... tu n'as pas accès aux sources de ce CMS ?