javascript – drop down menu not pushing content down but display over top?

I have been trying to make the drop down menu push content down rather than display over the other buttons. But i cant seem to figure it out. I have looked at other solutions and I have tried but i get strange output. I believe its because i have a system of inline grids for each drop down button. But i am not sure how to fix it, i tried position relative and absolute toggling but did not achieve desirable results. I am quite new to HTML but not programming and i just cant figure it out for the life of me. I experimented with similar code but with only one inline-gride with one coluns and 2 rows and it works, but it does not for me in the main website. I tried deleting the absolute position from .dropdown-content but it does respond like it should. what am i doing wrong?

would be greatful for an help.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .html .body {
            width: 100%;
            height: 100%;
        }
        
        body {
            background-color: blanchedalmond;
        }
        
        .griddy {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 35px;
            background-color: pink;
        }
        
        [class^='ssof'] {
            display: grid;
            outline: 1px solid black;
            align-items: center;
            justify-content: center;
        }
        
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }
        
        .topnav {
            border: 2px solid;
            background-color: darkcyan;
        }
        /* .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        } */
        /* .body {
            background-image: "nico.png";
            display: grid;
            grid-template-rows: auto, 1fr, auto;
            grid-template-columns: 100%;
        } */
        
        .banner {
            display: flex;
            grid-auto-columns: 80% 20%;
            justify-content: center;
            margin-right: auto;
        }
        
        .placeme {
            margin-left: auto;
            width: 20%;
            border: 2;
            height: 36px;
            padding: 0 10px;
            outline: 0;
        }
        
        .main {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr;
            /*100%*/
            grid-template-rows: auto 1fr auto;
            gap: 20px;
        }
        
        .maincontent {
            display: grid;
            /* outline: 3px solid black; */
            grid-template-columns: 2fr 8fr;
            gap: 10px;
            background-color: lightgray;
            outline: solid 8px lightgray;
            /*20% 80%*/
            /* grid-template-rows: auto auto auto auto; */
        }
        /* [class^='sidenavinline'] { */
        
        .sidenavinline {
            display: inline-grid;
            grid-template-columns: 100%;
            grid-template-rows: 60px 60px 60px;
            /* outline: solid 3px black; */
            grid-auto-rows: 60px;
            gap: 10px;
        }
        /* .one {
            display: grid;
            outline: solid 2px blue;

        } */
        
        [class^='one'] {
            display: grid;
            align-items: center;
            justify-content: center;
            /* outline: 3px dashed #f90; */
            background-color: white;
            font-size: 20px;
            color: #333;
            gap: 10px;
        }
        
        .mainmain {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 150px;
            /* outline: solid blueviolet; */
            /* grid-auto-columns: 1fr; */
            grid-auto-rows: 150px;
            gap: 10px;
        }
        
        [class^='submain'] {
            /* display: grid; */
            /* outline: dashed 3px black; */
            background-color: white;
            /* grid-auto-rows: 32%; */
            /* position: absolute; */
        }
        
        .footy {
            border: 3px solid black;
            padding: 30px;
        }
        /* Dropdown Button */
        
        .dropbtn {
            background-color: #3498DB;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /* Dropdown button on hover & focus */
        
        .dropbtn:hover,
        .dropbtn:focus {
            background-color: #2980B9;
        }
        /* The container <div> - needed to position the dropdown content */
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        /* Dropdown Content (Hidden by Default) */
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        /* Links inside the dropdown */
        
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        /* Change color of dropdown links on hover */
        
        .dropdown-content a:hover {
            background-color: #ddd
        }
        /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
        
        .show {
            display: block;
        }
    </style>
    <script>
        /* When the user clicks on the button,
                                                                                                                                                                                                                                                                           toggle between hiding and showing the dropdown content */
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        // Close the dropdown menu if the user clicks outside of it
        window.onclick = function(event) {
            if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
    </script>
</head>


<body>
    <div class="banner"><input type="text" placeholder="Search.." class="placeme"></div>
    <div class="griddy">
        <div class="ssof">home</div>
        <div class="ssof">search</div>
        <div class="ssof">bagicon</div>
        <div class="ssof">account</div>

    </div>

    <div class="topnav">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>

    <div class="main">
        <div class="sidenav"> p </div>


        <div class="maincontent">
            <div class="sidenavinline">
                <div class="one">
                    <div class="dropdown">
                        <button onclick="myFunction()" class="dropbtn">Dropdown</button>
                        <div id="myDropdown" class="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                    </div>
                </div>
                <div class="one">b</div>
                <div class="one">c</div>
                <div class="one">b</div>
                <div class="one">e</div>


            </div>
            <div class="mainmain">
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items</div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>
                <div class="submain"> this is where we put items </div>











            </div>
        </div>


        <footer>
            <p class="footy">bottom content</p>
        </footer>

    </div>

</body>

Leave a Comment