Centralizar o menu horizontalmente

utilize a propriedade line-height. Faça com que ela tenha o mesmo valor da altura:

li { height: 30px; line-height: 30px; }

Evandro,

Funcionou em parte, pois o background do efeito hover está centralizado, mas as palavras continua.

Veja nesse link: http://martinsrj.com/teste/4/

Inseri no código do CSS isso:

.menuhorizontal li{

display: inline;
float: left;
/*	padding:0px;

height: 68px; line-height: 68px;
}

Pra que tanta DIV???

>

<div class="menu">
	<!-- Home | Empresa | Serviços | Nossos Clientes | Teste de Nivelamento | Contato -->
	<div class="menu_esquerdo">
 <div class="menu_direito">
 <div class="menu_central">
 <ul class="menuhorizontal">
 <li class="btnesquerdo"><a href="#">Home</a></li>
 <li><a href="#">Empresa</a></li>
 <li><a href="#">Serviços</a></li>
 <li><a href="#">Nossos Clientes</a></li>
 <li><a href="#">Nivelamento</a></li>
 <li><a href="#">Contato</a></li>
 </ul>

 </div>
 </div>
	</div>

</div>

precisa funcionar no IE 6?

Mas qual seria a sua solução?

Seria diminuir o numero de divs? Caso sim, quais as divs atuais que irão continuar na pagina e se irá ter necessidade em reformular as classes para essas divs.

Desde agradeço pelos esclarecimentos.

O elemento <ul> faz tudo que um <div> faz e até mais, visto que não se pode colocar <li>'s dentro de <div>

A própria lista pode ser o contêiner, receber o background, a borda, o efeito, etc. Para mais informações e exemplos, consulte a nossa lista de menus propostos e suas respectivas soluções.

Veja que em sua maioria, os menus são feitos sem uso de <div>'s

Para o seu caso, é até simples:

Eu utilizaria esta imagem como plano de fundo /applications/core/interface/imageproxy/imageproxy.php?img=http://img249.imageshack.us/img249/2483/ss20110211234009.png&key=3c57ba0a366faa48c6ea95825c1a23cadf6cf18404db37e432df15e900e6d0eb" alt="ss20110211234009.png" /> repetida horizontalmente:

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Empresa</a></li>
 <li><a href="#">Serviços</a></li>
 <li><a href="#">Nossos Clientes</a></li>
 <li><a href="#">Nivelamento</a></li>
 <li><a href="#">Contato</a></li>
</ul>

 

#menu {
 background: url('bg.jpg') repeat-x;
 border-radius: 5px;
 height: 40px;
 width: 100%;
}

#menu li {

 float: left;
 list-style: none;
}

#menu a {

 color: #fff;
 display: inline-block;
 height: 40px;
 line-height: 40px;
}

Valeu Evandro pela ideia!

Irei efetuar o teste e logo em seguida postarei se foi com sucessou ou não.

Abraços.

Evandro, peço desculpas pela ignorancia, mas veja como ficou o meu

CSS:

http://pastebin.com/M0Ffnsdu

/---------MENU---------/

#menu {
 background: url(../images/bg_menu.png) repeat-x;
 border-radius: 5px;
 width: 100%;
margin-top: 5px;
margin-bottom: 5px;
height:73px;
text-align: center;

}

#menu li {

 float: left;
 list-style: none;
height: 68px; line-height: 68px;
width: 120px;
display:inline;
}

#menu a {

 color: #fff;
 display: inline-block;
 height: 68px; line-height: 68px;
text-decoration: none;
font:bold 13px Arial, Helvetica, sans-serif;
}

#menu :hover{

text-decoration: none;
color: #FFFFFF;
/*height: 40px;

background-image: url(../images/menu_over.jpg);
background-repeat: no-repeat;
background-position: center top;
}

Aqui o código HTML:

http://pastebin.com/MfGWSqqP

Gostaria o meu menu ficasse identico conforme a imagem abaixo:

http://martinsrj.com/teste/4/images/exemplo_de_menu.jpg

Obrigado

Defina uma largura específica para as LI's e posicione os A's relativamente, definindo-os como blocos e dando o plano de fundo adequado.

Ficaria semelhante a este molde:

<ul id="menu">
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
</ul>

 

#menu {
background: #000;
border-radius: 6px;
height: 75px;
}

#menu li {

float: left;
text-align: center;
width: 16.6%;
}

#menu a {

border-radius: 6px;
color: #fff;
display: inline-block;
height: 85px;
line-height: 85px;
position: relative;
top: -5px;
width: 100%;
}

#menu a:hover {

background-color: #00f;
}

 

Edit: Pelo CSS postado, as únicas edições que faltam são adicionar o position:relative aos <a>'s e aumentar a respectiva altura e line-height.

Evandro, consegui fazer dessa forma:

.menu_central{
background:url(../images/submenu_center.jpg) repeat-x scroll 0;
height:73px;
line-height:73px;
}

.menu_direito{
margin-top: 5px;
margin-bottom: 5px;
}

#menu {
 border-radius: 5px;
 width: 100%;
height:73px;
line-height:73px;
text-align: center;
vertical-align:middle;
}

#menu li {

 float: left;
 list-style: none;
height: 68px;
line-height: 68px;
width: 130px;
display: block;
text-align:center;
}

#menu a {

 color: #fff;
text-decoration: none;
font:bold 13px Arial, Helvetica, sans-serif;
position: relative;
height: 68px;
line-height: 68px;

}

#menu :hover{

text-decoration: none;
color:#fff;
background:url(../images/menu_over.jpg) no-repeat top;
}

Veja neste link: http://martinsrj.com/teste/5/index.html

A minha dificuldade é o seguinte:

quando se posiciona o cursor no mouse em cima da palavra aparece uma tarja cinza.

remova o plano de fundo dos elementos 'a' e 'a:hover'