Boa tarde. Gostaria de saber como faço para para centralizar meu sub menu referente ao menú principal. Os registros do sub menu são dinâmicos, então eu não consigo dar um margin-left : -px pois eu não sei o tamanho que será o meu sub-menu...
segue um código exemplo do meu problema :
ul, li {
margin : 0;
padding : 0;
}
#menu {
width : 100%;
}
#menu li {
margin : 0;
list-style: none;
}
#menu > li {
display : inline-block;
border : 1px solid #000000;
cursor : pointer;
}
#menu > li:hover ul {
display : block;
}
#menu li ul {
display : none;
position : absolute;
background-color : #000000;
color : #FFFFFF;
}
#menu li ul li:hover {
background-color : #d2d2d2;
}
<ul id="menu">
<li>Menu 1</li>
<li>
Menu 2
<ul>
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Um subMenu que é mais longo</li>
</ul>
</li>
<li>Menu 3</li>
</ul>