Skip to main content
$( function() {
  // Armazenamos o submenu numa variável por conveniência
  var $submenu = $( ".submenu" ); 

  $submenu.each(function(){
    $(this).css( "left", ( $(this).parent().outerWidth() / 2 ) - (                $(this).width() / 2 ) );
});

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

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 class="has-submenu">
    Menu 1
    <ul class="submenu">
      <li>Sub menu 1</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 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>
$( 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;
}

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 class="has-submenu">
    Menu 1
    <ul class="submenu">
      <li>Sub menu 1</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 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>
$( function() {
  // Armazenamos o submenu numa variável por conveniência
  var $submenu = $( ".submenu" ); 

  $submenu.each(function(){
    $(this).css( "left", ( $(this).parent().outerWidth() / 2 ) - (                $(this).width() / 2 ) );
});

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

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 class="has-submenu">
    Menu 1
    <ul class="submenu">
      <li>Sub menu 1</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 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>
correção de código.
Fonte Link
llanfair
  • 1,1mil
  • 6
  • 23

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>

Uma solução simples, mas efetiva em muitos os casos seria embrulhar o menu em um wrapper que tem 100% da largura da tela e centralizar o texto, já que você está utilizando uma ul.

* {
  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;
}
<div class="wrapper-menu">
<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>
</div>

Essa solução é complexa demais para o CSS. Teremos que usar JavaScript para calcular o 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;
}

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 class="has-submenu">
    Menu 1
    <ul class="submenu">
      <li>Sub menu 1</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 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>
Fonte Link
llanfair
  • 1,1mil
  • 6
  • 23

Uma solução simples, mas efetiva em muitos os casos seria embrulhar o menu em um wrapper que tem 100% da largura da tela e centralizar o texto, já que você está utilizando uma ul.

* {
  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;
}
<div class="wrapper-menu">
<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>
</div>