menu horizontal com separador | <<

Não utilize display: inline para deixar o menu em uma única linha. Use float e margin (para espaçamento). Tente algo assim:

#menu ul {

 padding:10px;
 width: 970px;
 list-style: none;
}

 float: left;
 margin: 0 10px;
 background: url(separator.jpg) no-repeat 0% 100%;
}

#menu ul li a {

 padding: 2px 20px;
 float:left;
 font: 16px Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica ;
 color:#565656;
 text-decoration: none;
 display: block;
}

#menu ul li a:hover {
background-color:#D6D6D6;
}Para o último botão você pode definir uma classe e estilizar ela no CSS para que não tenha background.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Opa,

fiz exatamente como sugeriu, daí da uma olhada o texto não ficou alinhado ao centro conforme esperado, acho que é por causa do padding... e aí tem alguma sugestão para que eu possa consertar?

Outro detalhe o sparador não ficou alinhado no topo =/

segue o link: http://www.reginaldolopes.com.br/v2/

#menu ul {

 padding: 0;
 margin: 0;
 text-align: default;
 height: 52px;
}

#menu ul li {

 background-position: right center;
 padding: 0 5px 0 0;
 height: 52px;
 margin: 0;
 width: 16%;
}

#menu ul li a {

 line-height: 52px;
 float: none;
 text-align: center;
}

O código acima é apenas para substituir os valores incorretos. Sobrescreva a estilização atual aplicando estes valores às propriedades que já estiverem definidas.

Valores padrão como padding: 0, margin: 0, float: none também valem para caso você exclua a regra. Eles foram definidos apenas com o propósito de sobreposição.

Caramba, esse menu não funciona de jeito nenhum!!!

já tentei de tudo..

e continua com esse pau de não alinhar o texto ao meio, alguém tem alguma ideia?

pelo menos na versão que você disponibilizou online, eu não vi modificações no arquivo .css

Opa, foi mal, tinha testado apenas localmente,

segue o link:

http://www.reginaldolopes.com.br/v2/

Ao meu ver está centralizado. O que falta?

tente aplicar isso aqui:

#menu { font-size: 0.8em; }
Vai fazer o 'Atuação Parlamentar' ocupar uma linha apenas

Pessoal, a minha dúvida é semelhante e por isso resolvi postar aqui nesse tópico.

Caso não consiga alguma opinião/ajuda, aí crio outro tópico ou mando mensagem para os envolvidos nesse.

Tenho um Menu em lista, e quero que antes de cada botão do menu haja um separador, colocando list-style-image:url

Pretendo também usar o first-child, para que o primeiro "li" não tenha separador (faz sentido para mim).

O CSS do meu Menu:

#menu {
	background: url(images/menu.jpg) repeat-x;
	height:31px;
	font-size:12pt;
	color:#606060;
	float:left;
	margin: 0 0 0 26px;
}

#menu ul li{

	float:left;
	padding:0 27px 0 0;
	list-style-image:url(images/entremenus.png) no-repeat;}

#menu ul li:firstchild {}

#menu ul li a{

	text-decoration:none;
	color:#000;
	font-size:12px;
	display:block;}

 <div id="menu">
 <ul>
 <li><a href="#">A Empresa</a></li>
 <li><a href="#">Segmentos de Atuação</a></li>
 <li><a href="#">Projetos em Operação</a></li>
 <li><a href="#">Projetos Realizados</a></li>
 <li><a href="#">Clientes</a></li>
 <li><a href="#">Notícias </a></li>
 <li><a href="#">Responsabilidade Social</a></li>
 </ul>
 </div> <!-- Fim id Menu-->

Pessoal, como de praxe, depois de uma pesquisada em outros layouts que fiz e , achei uma solução.

Criei uma classe "menu" no UL e essa classe tem a imagem do espaçador que eu queria.

<div id="menu">
 <ul class="menu">
 <li><a href="#">A Empresa</a></li>
 <li><a href="#">Segmentos de Atuação</a></li>
 <li><a href="#">Projetos em Operação</a></li>
 <li><a href="#">Projetos Realizados</a></li>
 <li><a href="#">Clientes</a></li>
 <li><a href="#">Notícias </a></li>
 <li><a href="#">Responsabilidade Social</a></li>
 </ul>
 </div> <!-- Fim id Menu-->

.menu {
	list-style-image:url(images/entremenus.png);}

#menu {
	background: url(images/menu.jpg) repeat-x;
	height:31px;
	font-size:12pt;
	color:#606060;
	float:left;
	margin:0 0 0 26px;
}

#menu ul li{

	float:left;
	padding:0 27px 0 0;
}

#menu ul li:firstchild {
list-style-type:none;}

#menu ul li a{

	text-decoration:none;
	color:#000;
	font-size:12px;}

Agradeço novamente!

O ":first-child" está escrito de forma errada por isso não está funcionando.

Só lembrando que este pseudo-seletor não irá funcionar no IE6... Mas isso é apenas um mero detalhe.