Duda background

[vpalomar001]

Me gustaria poner en mi web una barra de navegacion horizontal con un fondo rojo, y cada boton que se situa dentro de esta barra con el mismo fondo. Pero..quiero que se diferencien los botones, por lo que de fondo a cada boton le pongo una barra vertical. Mi problema es que no quiero que en el boton de mas a la derecha se muestre la barra vertical.

Me gustaria que se viera:
INICIO | DONDE ESTAMOS | COMERCIO | TIENDA ONLINE

y no de esta forma(en este tiene una barra vertical de mas):
INICIO | DONDE ESTAMOS | COMERCIO | TIENDA ONLINE |

Como lo puedo hacer?

[ArturoGallegos]

si esa linea la pones con una imagen de fondo, al ultimo elemento agrega una clase adicional por ejemplo

<li class="item last">...</li>

la clase item va en todos los elementos de la lista y last solo en el ultimo elemento, para con este retirar el background que muestra esa linea.

[angelvargaspool]

Numero 1, no utilices muchas imágenes como fondo, mejor utiliza css3, con css3 puedes crear degradados.

Numero 2 utiliza css3.

Numero 3 supongamos tu lista de la siguiente forma:

Código HTML:

<ul id="menu">
     <li>menu1</li>
     <li>menu2</li>
     <li>menu3</li>
     <li>menu4</li>
</ul> 

puedes utilizar

Código:

#menu li:last-child{}

¿Que hará este código en css?, que solamente al ultimo hijo se vera afectado por este cambio, en este caso menu4, dentro pondras lo que quieras que suceda.

si por ejemplo usas imágenes(que no recomiendo), creas una imagen sin tu barra, y dentro pones que tenga esa imagen como fondo, espero te sirva