Ir para conteúdo
Fórum Script Brasil
  • 0

Centralizar menu HTML + CSS


junior.andrade88

Pergunta

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" />
        <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
    </head>
    
    <body class="homepage">
        <div id="page-wrapper">
            <!-- Header -->
            
                <div id="header-wrapper">
                <!-- Nav -->
                        
                            <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;
            }

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

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.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...