2

Pesquisei o código necessário para construir um menu dropdown em CSS. O que encontrei foi um menu funcional, mas que ficava alinhado à esquerda. Depois busquei como alinhar elementos ao centro utilizando CSS. Consegui centralizar o menu, mas os sublinks ficaram estranhos, veja na imagem.

dropdown desalinhado

Sendo que escolhi uma cor de fundo amarela para o menu de propósito. Vou colocar aqui o código CSS e HTML:

body {
  font-size: 16px;
}

.menu {
  list-style: none;
  width: 25em;
  background: yellow;
  margin-left: auto;
  margin-right: auto;
}

.menu li {
  position: relative;
  float: left;
}

.menu li a {
  background: red;
  color: #fff;
  text-decoration: none;
  padding: 14px 20px;
  display: block;
}

.menu li a:hover {
  background: darkred;
  color: #fff;
  text-shadow: 0px 0px 5px red;
}

.menu li ul {
  position: absolute;
  top: 45px;
  left: 0;
  background-color: yellow;
  display: none;
}

.menu li:hover ul,
.menu li.over ul {
  display: block;
}

.menu li ul li {
  border: 1px solid #c0c0c0;
  display: block;
  width: 100px;
}
<html>

<head>
  <title></title>
</head>

<body>

  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link1</a>
      <ul>
        <li><a href="#">Sub1</a></li>
        <li><a href="#">Sub2</a></li>
      </ul>
    </li>
    <li><a href="#">Link2</a></li>
  </ul>

</body>

</html>

OBS: O CSS está inbutido no HTML, pois é apenas uma página com este menu...

A técnica pra centralizar está errada? O que eu posso fazer pra centralizar este menu?

2
  • 3
    Possível duplicata de Como posso centralizar meu menu de dropdown?
    – RFL
    14/09/2016 às 17:16
  • 1
    Utilizei o display flex recomendado, mas o problema continua, esta barra amarela à esquerda. Acho que a solução é usar left:-40 no menu li ul e também remover a cor de fundo do menu. 14/09/2016 às 17:22

2 Respostas 2

0

Para centralizar o menu, utilizei o display flex, que foi sugerido nos comentários. O problema persistiu, mas descobri que era devido a uma série de ajustes, por exemplo o fundo amarelo não estava somente no .menu, além disso ajustei posição e largura das caixas de sublinks.

2
  • conseguiu resolver?
    – RFL
    14/09/2016 às 17:35
  • sim, ficou um menu funcional e sem aqueles bugs, obrigado. 14/09/2016 às 17:44
-2

eu consegui arrumar o meu colocando position:relative e padding: 0px no .menu ul

0

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 .