0

Pessoal, estou fazendo um menu e estou com o seguinte problema:

inserir a descrição da imagem aqui

Como podem ver os itens não se alinham como o de cima****, teria como eu mandar essa **lista ir para a esquerda? Já tentei algumas tags mas não consegui(provável que eu esteja usando a tag de forma errada aeuhaue)

HTML

<nav class="menu">
            <ul>
                <li><a href="#">Mr. Taste</a></li>
                <li><a href="#">Parceiros</a></li>
                <li><a href="#">Produtos</a>
                    <ul>
                        <li><a href="#">Lanches</a></li>
                        <li><a href="#">Batatões</a></li>
                        <li><a href="#">Panquecas</a></li>
                        <li><a href="#">Pratos Feito</a></li>
                    </ul>
                </li>
                <li><a href="#">Sobre nós</a></li>
                <li><a href="#">Redes Sociais</a>
                    <ul>
                        <li> <a href="#">Facebook</a></li>
                        <li> <a href="#">Instagram</a></li>
                        <li> <a href="#">Twitter</a></li>
                        <li> <a href="#">Whatssap</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

CSS

{
    margin: 0;
    padding: 0;
}

.menu {
    width: 100%;
    height: 53px;
    background-color: #222;
    font-family: 'Segoe UI';
}

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

        .menu ul li {
            width: 200px;
            float: left;
        }

    .menu a {
        display: block;
        text-decoration: none;
        text-align: center;
        background-color: #222;
        color: #fff;
        padding: 15px;
        left:0;
        list-style:none;
    }

    .menu ul ul {
        position: absolute;
        visibility: hidden;
        list-style-type: none
    }

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

    .menu a:hover {
        background-color: #f4f4f4;
        color: #555;
    }

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

        .menu ul ul li a {
            background-color: #069;
        }

label[for="bt_menu"] {
    padding: 5px;
    background-color: #222;
    color: #fff;
    font-family: "Segoe UI";
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

#bt_menu {
    display: none;
}

label[for="bt_menu"] {
    display: none;
}

@media(max-width: 800px) {
    label[for="bt_menu"] {
        display: block;
    }

    #bt_menu:checked ~ .menu {
        margin-left: 0;
    }

    .menu {
        margin-top: 5px;
        margin-left: -100%;
        transition: all .4s;
    }

        .menu ul li {
            width: 100%;
            float: none;
        }

        .menu ul ul {
            position: static;
            overflow: hidden;
            max-height: 0;
            transition: all .4s;
        }

        .menu ul li:hover ul {
            height: auto;
            max-height: 200px;
        }
}

Desde já agradeço a todos!

1
  • Sem código HTML/CSS não tem como ajudar, porque não dá pra saber como você está fazendo o menu.
    – Sam
    24/12/2018 às 16:54

2 Respostas 2

0

Você precisa retirar o padding e o margin das ul e das li em .menu ul e .menu ul li:

.menu ul {
   list-style: none;
   position: relative;
   list-style-type: none;
   padding: 0; /* aqui */
   margin: 0; /* aqui */
}

.menu ul li {
   width: 200px;
   float: left;
   padding: 0; /* aqui */
   margin: 0; /* aqui */
}

E também retirar o margin do body:

body{
   margin: 0;
}

Veja (execute em tela cheia):

body{
    margin: 0;
}

.menu {
    width: 100%;
    height: 53px;
    background-color: #222;
    font-family: 'Segoe UI';
}

.menu ul {
   list-style: none;
   position: relative;
   list-style-type: none;
   padding: 0;
   margin: 0;
}

.menu ul li {
   width: 200px;
   float: left;
   padding: 0;
   margin: 0;
}

    .menu a {
        display: block;
        text-decoration: none;
        text-align: center;
        background-color: #222;
        color: #fff;
        padding: 15px;
        left:0;
        list-style:none;
    }

    .menu ul ul {
        position: absolute;
        visibility: hidden;
        list-style-type: none
    }

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

    .menu a:hover {
        background-color: #f4f4f4;
        color: #555;
    }

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

        .menu ul ul li a {
            background-color: #069;
        }

label[for="bt_menu"] {
    padding: 5px;
    background-color: #222;
    color: #fff;
    font-family: "Segoe UI";
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

#bt_menu {
    display: none;
}

label[for="bt_menu"] {
    display: none;
}

@media(max-width: 800px) {
    label[for="bt_menu"] {
        display: block;
    }

    #bt_menu:checked ~ .menu {
        margin-left: 0;
    }

    .menu {
        margin-top: 5px;
        margin-left: -100%;
        transition: all .4s;
    }

        .menu ul li {
            width: 100%;
            float: none;
        }

        .menu ul ul {
            position: static;
            overflow: hidden;
            max-height: 0;
            transition: all .4s;
        }

        .menu ul li:hover ul {
            height: auto;
            max-height: 200px;
        }
}
<nav class="menu">
   <ul>
       <li><a href="#">Mr. Taste</a></li>
       <li><a href="#">Parceiros</a></li>
       <li><a href="#">Produtos</a>
           <ul>
               <li><a href="#">Lanches</a></li>
               <li><a href="#">Batatões</a></li>
               <li><a href="#">Panquecas</a></li>
               <li><a href="#">Pratos Feito</a></li>
           </ul>
       </li>
       <li><a href="#">Sobre nós</a></li>
       <li><a href="#">Redes Sociais</a>
           <ul>
               <li> <a href="#">Facebook</a></li>
               <li> <a href="#">Instagram</a></li>
               <li> <a href="#">Twitter</a></li>
               <li> <a href="#">Whatssap</a></li>
           </ul>
       </li>
   </ul>
</nav>

0

Seria de grande aJudá se você postar um trecho do seu código aqui. Mas vendo pela imagem, possivelmente o que está acontecendo é que você esqueceu de dar um reset no padding-left do elemento pai.

Tente o seguinte:

ul.nome-da-class-sub-lista{ padding-left:0; }

2
  • 1
    @leandror Na maioria dos casos o posicionamento do submenu é feito com uso de position: absolute para um elemento ul dentro de um elemento li. Se este for o seu caso, identifique o elemento ul que marca o submenu e altere nas CSS a coordenada left. Se não, poste a marcação HTML e CSS do menu. A barra foi criada com Bootstrap? Se sim informe somente a versão do BS.
    – Maujor
    24/12/2018 às 18:33
  • Pronto, inseri o html e o Css, espero que isso ajude!
    – leandror
    24/12/2018 às 19:18

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 .