Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Galera, preciso de ajuda com um menu DropDown...

Boa tarde Pessoal, estou com duas dificuldades neste meu código...

A primeira, fazer com que o o li_secundario apareça apenas no hover, eu tentei colocar li_secundario:hover{ display:block} mas não funcionou... e o segundo problema é que na li_secundario eles também estão aparecendo lado a lado, e não um item abaixo do outro...

    <nav>
              <ul class="main_menu">
                <li><a href="#" class="li_principal">Home</a></li>
                <li><a href="#" class="li_principal">Quem Somos</a></li>
                  <li><a href="#" class="li_principal">O que fazemos</a>
                       <ul>
                        <li><a href="#" class="li_secundario">Criação de WebSites</a></li>
                        <li><a href="#" class="li_secundario">SEO</a></li>
                        <li><a href="#" class="li_secundario">Design Gráfico</a></li>                    
                        <li><a href="#" class="li_secundario">Hospedagem de Sites</a></li>
                        <li><a href="#" class="li_secundario">Gerenciamento de Redes Sociais</a></li>
                        <li><a href="#" class="li_secundario">Branding</a></li>
                        <li><a href="#" class="li_secundario">E-mail Marketing</a></li>
                    </ul>
                <li><a href="#" class="li_principal">Portifólio</a></li>
                <li><a href="#" class="li_principal">Contato</a></li>                
            </ul>
        </nav>
.main_menu{
    float:left;
    position:relative;
        top:-10px;
    height:40px;
    width:100%;
    z-index:-4;
}

.main_menu li{
    float:left;
}

.li_principal{
    float:left;
    font-size:30px;
    font-family:"Verdana";
    padding-left:25px;
    padding-right:25px;
    position:relative;
        left:500px;
    color:#499322;
    text-decoration:none;
    background-color:#C0C0C0;
    border-top-left-radius: 10em;
    border-top-right-radius:10em;
    border-bottom-left-radius:10em;
    border-bottom-right-radius:10em;
    height:35px;
    opacity:0.85;
}

.li_secundario{
    position:absolute; 
        top:35.5px; 
        left:890px; 
    font-size:25px;
    color:#499322;
    font-family:"Verdana";
    text-decoration:none;
    background-color:#C0C0C0;
    border-top-left-radius: 10em;
    border-top-right-radius:10em;
    border-bottom-left-radius:10em;
    border-bottom-right-radius:10em;
    height:30px;
    opacity:0.85;

}
3 respostas

Olá, não sei se pode ser isso mas no terceiro <li> (de cima para baixo) você não chegou a fechar ele

nao é isso oi apenas erro na copia e cola do codigo

solução!

Werner acabei de fazer um post no meu blog sobre o assunto:

http://blog.matheuscastiglioni.com.br/Menu-dropdown

Caso ainda tenha dúvidas me avise que agente vai se falando.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software