centralizar menu usando float:left

[jnejunior 1]

salve pessoal...

 

tenho um menu com submenu simples, só que não consigo centralizar o mesmo, pois estou usando float:left, e se eu tiro o float tenho que definir uma altura para a ul, mas o menu funciona só que o submenu fica bagunçado..

 

se alguem puder ajudar.

 

segue o html do menu:

<section id="menu">
		<nav id="menu-interno">
			<ul>
				<li>
					<a href="inicio" title="">Início
						<p>Página inicial</p>
					</a>
				</li>
				<li>
					<a href="desenvolvimento-web" title="">Desenvolvimento web
						<p>Linguagens de programação</p>
					</a>
					<ul>
						<li><a href="" title="ASP">ASP</a></li>
						<li><a href="" title="C#">C#</a></li>
						<li><a href="" title="HTML">HTML</a></li>
						<li><a href="" title="JAVA">JAVA</a></li>
						<li><a href="" title="JQUERY">JQUERY</a></li>
						<li><a href="" title="PHP">PHP</a></li>							
					</ul>
				</li>
				<li>
					<a href="design" title="">Design / Criação
						<p>Desenvolvimento de arte e criação</p>
					</a>
					<ul>
						<li><a href="" title="Corel Draw">Corel Draw</a></li>
						<li><a href="" title="Illustrator">Illustrator</a></li>
						<li><a href="" title="Flash">Flash</a></li>
						<li><a href="" title="Fireworks">Fireworks</a></li>
						<li><a href="" title="Photoshop">Photoshop</a></li>
					</ul>
				</li>
				<li>
					<a href="banco-de-dados" title="">Banco de dados
						<p>Linguagem SQL</p>
					</a>
				</li>
				<li>
					<a href="contato" title="">Contato
						<p>Entre em contato conosco</p>
					</a>
				</li>
			</ul>
		</nav><!-- menu-interno -->
	</section><!-- menu -->

 

e esse é o css do menu:

#menu { float: left; margin: 15px auto; width: 100%; }

#menu-interno ul {
   background: -webkit-linear-gradient(top, #fff, #e1e1e1);
background: -moz-linear-gradient(top, #fff, #e1e1e1);
background: -ms-linear-gradient(top, #fff, #e1e1e1);
background: -o-linear-gradient(top, #fff, #e1e1e1);
background: linear-gradient(top, #fff, #e1e1e1);
border: 1px solid #ccc;
   float: left;
   margin: 0 auto;
   width: 998px;
}

#menu ul li ul:last-child { border-bottom: none; }

#menu li {
border-left: 1px solid #f4f4f4;
border-right: 1px solid #ccc;
float: left;
position: relative;
}

#menu li a {
color: #333;
display: block;
font: bold 18px Georgia, 'Times New Roman', Times, serif;
padding: 35px 10px;
text-decoration: none;

-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
}

#menu ul li a p { color: #666; font: 14px Arial, Helvetica, 'sans-serif'; }

#menu li:hover {
background: #fff;
color: #000;

-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
}

#menu li:first-child { border-left: none; }
#menu li:last-child { border-right: none; }

#menu li ul {
   left: -99999em;
   position: absolute;
   top: 100%;
   width: 250px;
}

#menu li:hover ul { left: -2px; z-index: 2; }
#menu li ul li a { border-bottom: 1px solid #ccc; font: 14px Arial, Helvetica, sans-serif; padding: 15px 10px; }
#menu li ul li:last-child { border-bottom: none; }
#menu li ul li { border-left: none; border-right: none; width: 100%; }
#menu li ul li ul { display: none; }

#menu li ul li:hover ul {
display: block;
float: left;
left: 250px;
position: absolute;
top: -1px;
}

 

só pra constar, resolvi o problema, mas acho que deva existir uma forma mais inteligente de resolver isso..

 

meu html ficou assim:

<section id="menu">
 <section id="menu-centraliza">
   <nav id="menu-interno">
     <!-- aqui vem o menu de lista não ordenada -->
   </nav>
 </section>
<section>

 

e no css fiz assim, na #menu-centraliza:

#menu-centraliza {
 margin: 0 auto;
 width: 1000px;
}

[Apenas Eu 13]

Ola!

Rapaiz eu tentei ver aki o que poderia ser (embora nao seja mestre nisso), mas eu não consegui.

 

Vou postar o meu codigo aqui dae você se basea nele... Ele está alinhado certinho aqui...blza?

 

css

ul li a{
display: block;
text-decoration: none;

}
#menu {
float:left; 
background: url(../imagens/menu2.png) repeat;
width: 100%;
height: 49px;
padding:0; margin:0 0 0 0; 
} 
#menu ul {
list-style: none; text-align:center; margin:auto;
z-index:2;
}
ul.principal {
height: 30px; width: 850px;
padding: 0 0 0 0
}
ul.principal li {
float: left;
position: relative;
height: 40px; width: 120px;

}
ul.principal li:first-child, ul.principal li#first {
margin-left: 0;}

ul.principal li a {
color: #CCCCCC; font-weight:400;
display: block;
height: 28px; width:120px;
text-align: center;
font-family: Calibri; font-size: 16px; 
margin: 1px;
padding: 12px 0 0 0;



}
ul.principal li a:hover {
text-decoration: none;
height: 62px;
text-align: center;
}
ul.principal li:hover a, ul.principal li.over a {
background: url(../imagens/hover4.png) repeat;
color: #F3F3F3;
height: 35px; width:120px;
text-align: center;
z-index: auto;
}
ul.principal li ul.nivel2 {
position: absolute;
left: 0;
top: 42px;
display: none;
z-index:5;
width: 150px;
}
ul.principal li:hover ul.nivel2, ul.principal li.over ul.nivel2 {display: block;}
ul.principal li ul.nivel2 li {
height: 30px;
margin: 0;
}
ul.principal li ul.nivel2 li a {
background: #0066FF;
border: 1px solid #000;
color: #000;
font-size: 11px; font-weight: normal;
height: 25px; width: 150px;
margin: 0;
padding: 5px 0 2px 5px;
text-align: left;
}

 

o html meu é bem simples:

 

<ul class="principal">
<li><a href="index.php" >Home Page</a></li>
<li><a href="sobre-a.php">Sobre a DCS</a></li>
<li><a href="servicos.php">Serviços</a></li>
<li><a href="artigos.php">Artigos</a></li>
<li><a href="mail.php">Clientes</a></li>
<li><a href="portifolio.php">Portifólio</a></li>
<li><a href="contato.php">Fale Conosco</a></li>
</ul>

 

pelo menos isso vai ajudar você ae, enquanto não surgir uma resposta mais definitiva

 

Valeuu :thumbsup:

 

Ahhh..e esse codigo acima fica dentro do <div id="menu"> </div>. Está assim pq eu uso o comando include.

[jnejunior 1]

obrigado por responder, vou testar aqui, espero que funcione...