0

Estou tentando criar um menu parecido com um que vi num site.

Eu consegui fazer tudo certo, só não consigo deixar ele ocupando a barra inteira do menu. Print1 : http://prntscr.com/bmbbp4 Print2 : http://prntscr.com/bmbcl9

Depois de muita pesquisa descobri que se eu deixasse

position: absolute;
left: 0; /* Ou "0px" */
right: 0; /* Ou "0px" */

Isso iria funcionar, mas não funcionou e ficou como os prints acima, eu teria uma outra opção?

2
  • 1
    Bota um width:100%, se o container num tiver padding vai funcionar se tiver se zera o padding...
    – MagicHat
    Commented 28/06/2016 às 21:32
  • Tentei, não deu certo. Commented 28/06/2016 às 21:50

3 Respostas 3

0

Tenta esse...

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

fonte

1
  • Não funcionou, ele ficou só na esquerda, ao invés de ocupar o menu inteiro. Commented 28/06/2016 às 21:51
0

O problema ocorreu depois de acrescentar essas linhas: http://prntscr.com/bmbpag

Que fiz para que cada submenu referente a sua "ListaX" tenha uma cor específica.

Quando removo essas linhas, ele volta a ocupar tudo novamente. Ele sem as linhas das cores: http://prntscr.com/bmbqd6

Teria uma outra forma de eu declarar as cores sem interferir no right e left?

0

CONSEGUI! Declarei as cores na tag do referente ao submenu, deu certo.

exemplo:

<ul style="background-color: #333"></ul>

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 .