How can I make my dropdown menu "close"/"rise" properly

Asked

Viewed 19 times

0

was making a menu for a website (school work), but I found a problem:

When it is on small screen it creates that sandwich icon and when it is triggered the menu appears in the form of normal dropdown, but I can’t make the dropdown "up" again, because the "sandwich" button is not appearing again (which I believe should).

Note: I remember that this problem was due to removing something temporarily to try to solve another, but as it has been a while, I can’t remember anymore what it is.

Can you tell me what’s missing from the code so it works properly?

HTML code:

* {
    /* Serve para resetar as margens da página */
    margin: 0px;
    padding: 0px;
}
.log{
    margin-top: -30px;
}

.menu{
    /* Setamos a largura, Altura e Cor da Nav */
    position: fixed ;
    top: 0;
    width: 100%;
    height: 55px;
    background-color: #006144;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 99;
}
.menu ul{
    /* Retiramos o estilo nativo das listas e ajeitamos a posição */
    list-style: none;
    position: relative;
}

.menu ul li{
    /* Designamos o espaço máximo das <li> */
    width: 150px;
    float: left;
}

.menu a{
    /* configuramos o <a> */
    display: block;
    text-decoration: none;
    padding: 15px;
    text-align: center;
    /* Cor das Opções: */
    background-color: #006144;
    color: white;
    max-height: 50px;
}

.menu ul ul{
    /* configuração para fazer com que as opções do dropdown fiquem 
    invisiveis até que se passe o mouse por cima */
    position: absolute;
    visibility: hidden ;
}

.menu ul li:hover ul{
    /*Faz com que depois que se passe o mouse por cima o dropdown fique visível */
    visibility: visible;
}
.menu a:hover{
    /* estilizamos a cor das opções quando passamos o mouse */
    background-color: #f4f4f4;
    color: black;
}

.menu ul ul li {
    /* criamos uma pequena linha separando cada opção do dropdown */
    float: none;
    border-top: solid 1px #cccccc;
}

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

.label_menu{
    /* Configuração do icone da versão reduzida */
    padding: 5px;
    background-color: #006144;
    color: white;
    font-family: "Arial";
    text-align: left;
    font-size: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: none;
}

#bt_menu{
    display: none;
}

.logo{
    /* configuração da logo do inicio */
    width: 40px;
    height: 40px;
    margin: 5px;
    cursor: pointer;  
}
.li_logo{
    margin-right: -70px;
    margin-left: 10px;

}


@media(max-width: 900px){

.menu{
    margin-top: 2px;
    margin-left: -100%;
    font-size:12pt;
}
.li_logo{
    margin-left:47%;
}
#bt_menu:checked~ .menu{
    /* Faz com que depois que checado a "check-box" as opções voltem a aparecer  */
    margin-left: 0;
    margin-top: 2px;
    background-color: #cc002a;
}
.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: 400px;
    /* O max height vai variar dependendo do número de itens */
}
.label_menu{
    display: block;
    width: 100%;
}

}
<input type="checkbox"  id="bt_menu">
    <label for="bt_menu" class="label_menu">&#9776;</label>

    
    <!-- Inicio da Nav Bar -->
    <nav class="menu">
        <ul>
        <!-- A logo foi colocada em uma <li> com uma classe especifica para não
        atrapalhar a formatação -->
            <li class="li_logo" onclick="window.location.assign('../Funcs/inicio.php');"> <img src="../imagens/gremio.png" class="logo"> </li>

            <li><a href="#"> Bolsa Cópia </a>
                <ul>
                    <li><a href="../bolsaCopia/listar_bolsacopia.php">Listar</a> </li>
                    <li><a href="../bolsaCopia/cadastrar_bolsacopia.php">Cadastrar</a></li>
                </ul>
            </li>

            <li><a href="#"> Ac.Perdidos </a>
                <ul>
                    <li><a href="../achados/listar_achados.php">Listar</a> </li>
                    <li><a href="../achados/cadastrar_achados.php">Cadastrar</a></li>
                </ul>
            </li>

            <li><a href="#"> Empréstimos </a>
                <ul>
                    <li><a href="../emprestimo/listar_emprestimo.php">Listar</a> </li>
                    <li><a href="../emprestimo/cadastrar_emprestimo.php">Cadastrar</a></li>
                </ul>
            </li>
        </ul>
    </nav>

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.