Align navigation menu in the center

3

I'm trying to align the "drop" menu in the center. Help?

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>

The 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;
}
    
asked by anonymous 18.11.2015 / 21:03

1 answer

0

Leave your #drop with with:auto

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

See in the plunker

link

    
18.11.2015 / 21:08