2

Estou tentando alinhar o menu "drop" no centro. Help?

O HTML:

<main id="conteudo">
    <section id="produto" class="box">

        <nav id="drop">
            <ul>
                <li><a href="">Linha Automotiva</a></li>
                    <ul>
                        <li><a href="">Lanterna traseira</a></li>
                        <li><a href="">Sinalizador lateral</a></li>

                    </ul>
                <li><a href="">Linha perfil</a></li>
                <li><a href="">Linha multiuso</a></li>
                <li><a href="">Linha suporte</a></li>
                <li><a href="">Linha residencial</a></li> 
            </ul>
        </nav>
        <div id="foto-p">
            <p>Sinaleiras</p>
            <img src="../img/SMA0802.png">
        </div>
        <div id="foto-p">
            <p>Sinaleira lateral</p>
            <img src="../img/LR1108A.png">
        </div>
        <div id="foto-p">
            <p>Multiuso</p>
            <img src="../img/M12W.PNG">
        </div>
        <div id="foto-p">
            <p>Luminárias</p>
            <img src="">
        </div>

    </section>
</main>

O CSS:

.box{
clear: left;
position: relative;
max-width: 80%;
min-width: 767px;
min-height: 400px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
text-align: center;
}

#drop{
    margin-top:0px;
    display: inline-block;
    width: 100%;
}

#drop ul{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#drop ul a{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}

#drop ul li{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#drop ul li.current-menu-item{
    background:#ddd;
}

#drop ul li:hover{
    background:#f6f6f6;
}

#drop ul ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
}

#drop ul ul li{
    float:none;
    width:200px;
}

#drop ul ul a{
    line-height:120%;
    padding:10px 15px;
}

#drop ul ul ul{
    top:0;
    left:100%;
}

#drop ul li:hover + ul{
    display:block;
}

#drop ul li + ul:hover{
    display: block;
}

2 Respostas 2

0

Deixe seu #drop com with:auto

#drop {
    margin-top: 0px;
    display: inline-block;
    width: auto;
}

Veja no plunker

http://plnkr.co/edit/dpbe5xY9AIgrGcVeVcCa?p=preview

3
  • Desculpe,mas tinha colocado o código errado,mas já editei. Como pode ver, tem algumas div's ali, e se botar auto, elas acabam indo pra cima. 18/11/2015 às 20:19
  • Aqui mesmo com as div funciona normal com auto. 18/11/2015 às 20:28
  • Então deve ser algo no resto do código. Vlw 18/11/2015 às 23:20
0

Você diz o menu de navegação por inteiro ou quando o mouse tiver hover no menu em especifico? .

Primeiro de tudo você terá que deixar esses três elementos com o id="foto-p", comentados, ou apaga-los por enquanto.( Já cabe aqui um comentário de que usar id para mais de um elemento não é uma boa prática e pode te resultar em alguns problemas tanto com o css quanto com o Javascript, o recomendado é usar uma classe). Segundo, vamos usar um dislay:flex, para ser mais dinâmico e sem números mágicos, e você estilizou a section ao invés do drop, então passa a ser:

.box{

 display: flex;
 justify-content: space-around;

}

#drop{

margin-top:0px;
clear: left;
position: relative;
max-width: auto; /*melhor deixar o width por enquanto com auto*/
min-height: auto;
background-color: blue; /*mudei a cor para você poder "enxergar"o elemento*/
border-radius: 5px;
text-align: center;

} Espero ter te ajudado, procure por Flexbox, ajuda muito com desenvolvimento de layout.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .