Cannot figure out why the dropdown lists position over the button in the navbar instead of under it

CSS newbie here trying to figure out how to do dropdown menus.

I pretty much copied the code from W3Schools that taught this topic but modified it to have three separate dropdown lists that show up based on which part of the navbar is being hovered on but the lists show up on top of the button instead of below it just as in the example shown over in W3Schools. My code is shown below.

<!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>

I have tried using the code from W3Schools as is and do get the same results as in their example in the browser I'm using to check the results so it's not a browser thing.

I've tried to redo the entire CSS part of the code piece by piece, trying to copy as much from the W3Schools code as possible while modifying to fit my structure of 3 dropdowns but I run into the same problem.

Answer

I suggest that you remove the float:left on the .navBar button

Answer

Enjoyed this article?