Olá rapaziada,
Gostaria de uma ajuda com este menu que, está com todas as tags para ser centralizado porém ele fica um pouco mais pra direita e assim saindo de centro.
Segue o código:
HTML
<div id="menubg" align="center">
<div id="menu" align="center">
<section>
<header>
<nav>
<ul>
<li><a title="home" href="#home">HOME</a></li>
<li><a title="produtos" href="#produtos">PRODUTOS</a>
<ul>
<li><a title="arrozpreto" href="#arrozpreto">ARROZ PRETO</a></li>
<li><a title="arrozbasmati" href="#arrozbasmati">ARROZ BASMATI</a></li>
</ul>
</li>
<li><a title="pesquisa" href="#pesquisa">PESQUISA E INOVAÇÃO</a></li>
<li><a title="quemsomos" href="#quemsomos">QUEM SOMOS</a></li>
<li><a title="historia" href="#historia">HISTÓRIA</a></li>
<li><a title="contato" href="#contato">CONTATO</a></li>
</ul>
</nav>
</header>
</section>
</div>
</div>
CSS
#menubg {
top: 0px;
padding: 0px;
margin-top: 0em;
width: 100%;
height: 4em;
position: fixed;
z-index: 1;
opacity: 0.8;
background-color: #FFFFFF;
}
#menu {
width: 70em;
margin-left: auto;
margin-right: auto;
font: 1.200em Frutiger;
font-weight: light;
text-align: center;
}
#menu a {
color: #17490c;
text-decoration: none;
}
#menu ul {
margin-top: 0em;
list-style: none;
display: inline;
}
#menu ul li {
background-color: rgba(255, 255, 255, 0.8);
padding: 1em;
display: inline-block;
position: relative;
}
#menu ul li ul {
display: none;
position: absolute;
font-size: 0.750em;
text-align: center;
visibility: hidden;
width: 10em;
padding: 1.6em;
}
#menu ul li ul li {
display: block;
border-bottom: 0.150em solid #17490c;
}
#menu ul li:hover ul {
display: block;
visibility: visible;
}
Caso queiram ver online segue o link: http://altodosmarins.hol.es/teste/