centralizar menu usando float:left
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;
}Discussão (2)
Carregando comentários...