centralizar menu Centralizar menu HTML + CSS

junior.andrade88 · Abril 20, 2016

Pessoal, por favor me ajudem!!!
Não consigo centralizar meu menu de jeito nenhum... estou a 3 dias testando as mais variadas sugestões que encontrei na internet, mas nada funcionou até o momento no meu caso.

Quem quiser acessar o site: www.goodstoreapp.com/maxrevisional

HTML

<!DOCTYPE HTML>
<html>
   <head>
       <title>Max Revisional</title>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <link rel="stylesheet" href="assets/css/main.css" />
       
       
   </head>

   <body class="homepage">
       <div id="page-wrapper">
           

               <div id="header-wrapper">
               

                           <nav id="nav">
                               <ul>
                                   <li class="current"><a href="index.html">Home</a></li>
                                   <li>
                                       <a href="#">Quem Somos</a>
                                       <ul>
                                           <li><a href="empresa.html">A Empresa</a></li>
                                           <li><a href="depoimentos.html">Depoimentos</a></li>
                                       </ul>
                                   </li>
                                   <li>
                                       <a href="#">Serviços</a>
                                       <ul>
                                           <li><a href="revisional.html">Ação Revisional</a></li>
                                           <li><a href="credito.html">Recuperação de Crédito</a></li>
                                           <li><a href="cartao.html">Negociação de Dívidas</a></li>
                                           <li><a href="fgts.html">Revisão do FGTS</a></li>
                                           <li><a href="videos.html">Vídeos Explicativos</a></li>
                                       </ul>
                                   </li>
                                   <li><a href="simulacao.html">Simulação Gratuita</a></li>
                                   <li><a href="duvidas.html">Dúvidas</a></li>
                                   <li><a href="contato.html">Contato</a></li>
                               </ul>
                           </nav>

CSS

/* Nav */

   #nav {
       position: absolute;
       vertical-align: center;
       right: 0px;
       font-size: 1em;
       text-align: center;
       margin-top: 120px;
   }

       #nav ul li {
           float: left;
           line-height: 4.5em;
           text-align:center;
       }

           #nav ul li a, #nav ul li span {
               -moz-transition: background-color .25s ease-in-out;
               -webkit-transition: background-color .25s ease-in-out;
               -ms-transition: background-color .25s ease-in-out;
               transition: background-color .25s ease-in-out;
               font-weight: 800;
               letter-spacing: 0.025em;
               color: #696969;
               text-decoration: none;
               border-radius: 5px;
               padding: 0.5em 1em 0.5em 1em;
               text-align:center;

           }

           #nav ul li > ul {
               display: inline-block;
           }

           #nav ul li:hover a, #nav ul li:hover span {
               background: #ddd;
           }

           #nav ul li.active a, #nav ul li.active span {
               background: #fff;
           }

           #nav ul li.current a {
               background: #ED3237;
               color: #fff;
           }

   .dropotron {
       background: #fff;
       letter-spacing: 0.025em;
       color: #000;
       text-decoration: none;
       border-radius: 6px;
       padding: 0.75em 0;
       min-width: 15em;
       box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.025);
       margin-top: calc(-0.75em + 1px);
       margin-left: -1px;
   }

       .dropotron li {
           border-top: solid 1px #eee;
           line-height: 3em;
       }

           .dropotron li:first-child {
               border-top: 0;
           }

           .dropotron li > a, .dropotron li > span {
               -moz-transition: color .25s ease-in-out, background-color .25s ease-in-out;
               -webkit-transition: color .25s ease-in-out, background-color .25s ease-in-out;
               -ms-transition: color .25s ease-in-out, background-color .25s ease-in-out;
               transition: color .25s ease-in-out, background-color .25s ease-in-out;
               text-decoration: none;
               color: inherit;
               display: block;
               padding: 0 1.5em;
           }

               .dropotron li > a:hover, .dropotron li > span:hover {
                   background: #ddd;
               }

           .dropotron li.active > a, .dropotron li.active > span {
               background: #eee;
           }

       .dropotron.level-0 {
           font-size: 0.9em;
           margin-left: 1.5em;
           margin-top: 0;
       }

           .dropotron.level-0:before {
               content: '';
               position: absolute;
               top: -0.5em;
               left: 1em;
               border-bottom: solid 0.75em #ffffff;
               border-left: solid 0.75em transparent;
               border-right: solid 0.75em transparent;
               z-index: 1;
           }

sousatg · Maio 2, 2016

Existem várias coisas que deves fazer para conseguir o que queres.

#nav {
position: static;
}

#nav ul li {
float: none;
display: inline-block;
}

Também deves editar o código HTML, dentro da div " header-wrapper " o código para o header deve estar primeiro que o código para o menu de navegação.

Entrar

centralizar menu Centralizar menu HTML + CSS

Pergunta

junior.andrade88

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

sousatg

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades