Início / coding / Perguntas / 79583126
Accepted
Run 63
Asked: 2025-04-20 15:26:59 +0800 CST

Não consigo descobrir por que as listas suspensas são posicionadas sobre o botão na barra de navegação em vez de abaixo dele

  • 772

Sou novato em CSS e estou tentando descobrir como criar menus suspensos.

Copiei praticamente o código do W3Schools, que ensinava este tópico, mas o modifiquei para ter três listas suspensas separadas, que aparecem com base na parte da barra de navegação sobre a qual o cursor está sendo passado. No entanto, as listas aparecem em cima do botão em vez de abaixo dele, como no exemplo mostrado no W3Schools. Meu código é mostrado abaixo.

<!DOCTYPE html>
<html style="font-size: 16px;font-family: Roboto" lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style>
        .navBar{
            overflow: hidden;
            background-color: red;
        }

        .navBar button{
            background: transparent;
            color: white;
            border: none;
            outline: none;
            padding: 14px 16px;
            height: 48px;
            width: 128px;
            font-size: 16px;

            float: left;
        }

        .navEvents, .navGear, .navClubs{
            float: left;
            overflow: hidden;
        }

        .dropdownEvents, .dropdownGear, .dropdownClubs{
            display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        }

        .dropdownEvents a, .dropdownGear a, .dropdownClubs a{
          float: none;
          color: black;
        padding: 12px 16px;
          text-decoration: none;
        display: block;
        text-align: left;
        }

        .navEvents:hover .dropdownEvents{
            display: block;
        }

        .navGear:hover .dropdownGear{
            display: block;
        }

        .navClubs:hover .dropdownClubs{
            display: block;
        }
            
        </style>
    </head>
    <body>
        <h1>RUN63</h1>

        <div class="navBar">
            <button>Home</button>
            <div class="navEvents">
                <button>Events</button>
                <div class="dropdownEvents">
                    <a href="#">Live Events</a>
                    <a href="#">Past Events</a>
                    <a href="#">Ongoing Events</a>
                </div>
            </div>
            <div class="navGear">
                <button class="btnNavGear">Gear</button>
                <div class="dropdownGear">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
            <div class="navClubs">
                <button class="btnNavClubs">Clubs</button>
                <div class="dropdownClubs">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
            <button class="btnAbout">About</button>
        </div>

    </body>
</html>

Tentei usar o código do W3Schools como está e obtive os mesmos resultados do exemplo deles no navegador que estou usando para verificar os resultados, então não é um problema do navegador.

Tentei refazer toda a parte CSS do código, pedaço por pedaço, tentando copiar o máximo possível do código do W3Schools e modificando para se adequar à minha estrutura de 3 menus suspensos, mas encontrei o mesmo problema.

html

1 respostas

  1. Best Answer

    Sugiro que você remova o float:left no botão .navBar

    • 1

relate perguntas