UmaEssa solução simples, mas efetiva em muitos os casos seria embrulharé complexa demais para o menu em um wrapperCSS. Teremos que tem 100% da largura da tela e centralizarusar JavaScript para calcular o texto, já que você está utilizando uma ul
.posicionamento correto dos submenus:
$( function() {
// Armazenamos o submenu numa variável por conveniência
var $submenu = $( ".submenu" );
// Aqui, mudamos a propriedade left para ser igual ao tamanho do pai do submenu / 2 (seu centro) - a largura do submenu, em si, dividido por dois também
$submenu.css( "left", ( $submenu.parent().outerWidth() / 2 ) - ( $submenu.width() / 2 ) );
} );
* {
font-family: sans-serif;
}
.wrapper-menu { /* O wrapper do menu principal. */
text-align: center;
width: 100%;
border: 1px solid red;
}
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;
}
/* Regras novas */
.wrapper-menu {
width: 100%;
text-align: center;
}
#menu .has-submenu {
position: relative;
}
#menu .submenu li {
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper-menu">
<ul id="menu">
<li>Menu<li class="has-submenu">
Menu 1
<ul class="submenu">
<li>Sub menu 1</li>
<li> <li>Sub menu 2</li>
<li>Um subMenu que é mais longo</li>
</ul>
</li>
<!-- Criamos classes para melhor controle -->
<li class="has-submenu">
Menu 2
<ul><ul class="submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Um subMenu que é mais longo</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
</div>