3

Eu tento alinhar de todas as formas com text-align: center; mas nenhuma dá certo e quando dou espaçamento com left os sub-menus ficam desalinhados do menu!

* {
  margin: 0;
  padding: 0;
}

.menu {
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: Roboto;
  box-shadow: 0px 0px 100px 20px;
}

.menu ul {
  list-style: none;
  position: relative;
}

.menu ul li {
  width: 150px;
  padding: 0px 10px;
  float: left;
  line-height: 30px;
}

.menu ul li a {
  text-align: center;
  font-size: 19px;
}

.menu a {
  padding: 15px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #4d4d4d;
}

.menu ul ul {
  background-color: black;
  position: absolute;
  visibility: hidden;
}

.menu ul ul li {
  float: none;
  border-bottom: solid 1px #262626;
}

.menu ul li:hover ul {
  visibility: visible;
}

.menu a:hover {
  transition: all 0.4s ease;
  color: white;
  text-shadow: 3px 3px 20px;
}

.menu ul ul li {
  background-color: #1a1a1a;
}

.menu ul ul a {
  font-size: 17px;
}

.menu ul ul li a:hover ul ul ul {
  visibility: visible;
}
<body>
  <nav class="menu">
    <ul>
      <li><a href="#">5</a></li>
      <li><a href="#">4</a>
        <ul>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">3</a>
        <ul>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">2</a>
        <ul>
          <li><a href="#">5</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">1</a>
        <ul>
          <li><a href="#">5</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

1 Resposta 1

2

Retire o padding padrão dos <ul> e das <li>. Adicione a propriedade padding: 0; nas classes .menu ul e .menu ul li. Não utilize o float: left porque ele impede de centralizar os itens do menu, alinhando-os à esquerda. Em vez disso, coloque display: inline-block; nas li e text-align: center; no primeiro ul do menu.

Colocando text-align: center; no ul pai, não precisa colocar nos filhos porque eles já herdam a propriedade, evitando repetição. No CSS abaixo adicionei comentários do que foi removido e o que foi adicionado:

.menu ul{
text-align: center; /* adicionado */
list-style: none;
position: relative;
padding: 0; /* adicionado */
}

.menu ul li ul{
width: 100%; /* adicionado */
}

.menu ul li{
display:  inline-block; /* adicionado */
width: 150px;
padding: 0px 10px;
/*float: left;*/
line-height: 30px;
padding: 0; /* adicionado */
position: relative; /* adicionado */
}

.menu ul li a{
text-align: center;
font-size: 19px;
}

.menu a{
padding: 15px;
display: block;
/*text-align: center;*/
text-decoration: none;
color: #4d4d4d;
}

.menu ul ul{
background-color: black;
position: absolute;
visibility: hidden;
}

.menu ul ul li{
xxfloat: none;
display: block;
width: 100%;
border-bottom: solid 1px #262626;
}

.menu ul li:hover ul{
visibility: visible;
}

.menu a:hover{
transition: all 0.4s ease;
color: white;
text-shadow: 3px 3px 20px;
}

.menu ul ul li{
background-color: #1a1a1a;
}

.menu ul ul a{
font-size: 17px;
}

.menu ul ul li a:hover ul ul ul{
visibility: visible;
}
<nav class="menu">
        <ul>
            <li><a href="#">5</a></li>
            <li><a href="#">4</a>
                <ul>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">3</a>
                <ul>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">2</a>
                <ul>
                    <li><a href="#">5</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">1</a>
                <ul>
                    <li><a href="#">5</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
        </ul>
    </nav>

2
  • Desculpa sam, mas acho que não especifiquei bem o que eu queria realmente fazer, eu queria alinhar o menu ao centro da tela sem que os sub-menus entrem em confusão e se desalinhem! 21/09/2018 às 22:29
  • Veja se era isso agora, amigo.
    – Meu ovo
    21/09/2018 às 23:10

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 .