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;
}