0

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>

1 Resposta 1

1

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" );

  $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>

4
  • como escrito no titulo e no enunciado, o meu problema esta no sub menu e nao centrarlizar o menu em si... A centralizacao e no sub menu referente ao menu... Commented 3/08/2016 às 11:40
  • Devo ter sido apressado ao ler. Refiz a resposta, Douglas. Veja se te ajuda.
    – llanfair
    Commented 3/08/2016 às 12:10
  • Certinho.. Pensei em só usar css, mas pelo visto será necessário o uso de javascript.... Obrigado pela atenção, Abraço.. Commented 3/08/2016 às 12:34
  • fiz só uma alteração para que ele faça em todos os submenus existentes na tela... Commented 3/08/2016 às 12:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .