Separadores Para Navegación

Si no hay una necesidad urgente de usar imágenes para los separadores, podría hacerlo con CSS puro.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Esto pone una barra entre cada elemento de la lista, al igual que la imagen en la pregunta original descrita. Pero ya que estamos usando los selectores adyacentes , no pone la barra antes del primer elemento. Y ya que estamos usando el pseudo selector :before, no pone uno al final.

La otra solución está bien, pero no hay necesidad de agregar separador al final si se usa :después de o al principio si se usa :antes de.

ASÍ QUE:

Caso: después de

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

Caso :antes

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Para obtener el separador centrado verticalmente en relación con el texto del menú,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Agregue el separador al fondo li y asegúrese de que el enlace no se expanda para cubrir el separador, lo que significa que el separador no podrá hacer clic.

Puede agregar un elemento li donde desea agregar divisor

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

En CSS puede Agregar el siguiente código.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Esto aumentará la velocidad de ejecución, ya que no cargará ninguna imagen. solo pruébalo.. :)

Para aquellos que usan Sass , he escrito un mixin para este propósito:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Ejemplo:

@include addSeparator('li', '|', 1em);

Que te dará esto:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Ponlo como fondo en el elemento list:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

A continuación, recomiendo un marcado diferente para la accesibilidad:
En lugar de incrustar las imágenes en línea, poner texto como texto, rodear cada uno con un lapso, aplicar la imagen como fondo el el, y luego ocultar el texto con pantalla:ninguno this esto le da mucho más estilo flexibilty, y le permite utilizar mosaico con una imagen bg de 1px de ancho, ahorra ancho de banda, y se puede incrustar en un sprite CSS, que guarda HTTP llamadas:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE OK, veo que otros obtuvieron una respuesta similar antes que yo John y observo que John también incluye un medio para evitar que el separador aparezca antes del primer elemento, usando el selector li + li {lo que significa que cualquier li viene después de otro li.

Creo que la mejor solución para esto, es lo que uso, y eso es un borde css natural:

border-right:1px solid;

Es posible que tenga que cuidar de relleno como:

padding-left: 5px;
padding-right: 5px;

Finalmente, si no quieres que el último li tenga ese borde separado, dale a su último hijo "ninguno" en "borde correcto" de esta manera:

li:last-child{
  border-right:none;
}

Buena suerte:)