cant get drop down menu to position under button clicked on in the navbar?-CodePudding

No matter what i do, just cant seem to get the dropdown menu to appear under the buttons clicked on in the navbar, unless i use position absolute with the left property but then if I adjust the viewable area by readjusting the browser it gets back out of position. I need it to appear under the button no matter the screen width, ie auto ajust itself and always appear under the button. Bascially i need somethign that works at any screen resolution.

this is my code, you can see that it appears to the left. If i change position relative it disapears completely. I cant get it working no matter what i try.

I would appreciate any help.

Thank You

<body>
<div >
    <div >
        <div> <a href="#home">one</a></div>
        <div><a href="#news">Two</a></div>
        <div >
            <button >Three
         <i ></i>
           </button>
            <div >
                <div >
                    <h2> Menu</h2>
                </div>
                <div >
                    <div >
                        <h3>Category 1</h3>
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                    <div >
                        <h3>Category 2</h3>
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                    <div >
                        <h3>Category 3</h3>
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.CSS file

    <style>
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
    }
    
    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    .dropdownL {
        float: left;
        overflow: hidden;
    }
    
    .dropdownL .dropbtnL {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font: inherit;
        margin: 0;
    }
    
    .navbar a:hover,
    .dropdownL:hover .dropbtnL {
        background-color: red;
    }
    
    .dropdown-contentL {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 400px;
        left: 0;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
    
    .dropdown-contentL .header {
        background: red;
        padding: 16px;
        color: white;
    }
    
    .dropdownL:hover .dropdown-contentL {
        display: block;
    }
    /* Create three equal columns that floats next to each other */
    
    .column {
        float: left;
        width: 33.33%;
        padding: 10px;
        background-color: #ccc;
        height: 250px;
    }
    
    .column a {
        float: none;
        color: black;
        padding: 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .column a:hover {
        background-color: #ddd;
    }
    /* Clear floats after the columns */
    
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .navbar {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 46px;
        border: white 1px solid;
    }
</style>

CodePudding user response：

The main issue why "position:relative" doesnt work, is because you use "overflow:hidden" on the topbar.

The code below fixes your issue by removing some overflow hidden, and i added a media query so that on mobile the dropdown menu goes in the center of the page.

<head>
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
    <div >
        <div >
            <div><a href="#home">one</a></div>
            <div><a href="#news">Two</a></div>
            <div >
                <button >
                    Three
                    <i ></i>
                </button>
                <div >
                    <div >
                        <h2>Menu</h2>
                    </div>
                    <div >
                        <div >
                            <h3>Category 1</h3>
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                        <div >
                            <h3>Category 2</h3>
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                        <div >
                            <h3>Category 3</h3>
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

And for css

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.navbar {
    /* overflow: hidden; */
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdownL {
    float: left;
    /* overflow: hidden; */
    position: relative;
}

.dropdownL .dropbtnL {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}

.navbar a:hover,
.dropdownL:hover .dropbtnL {
    background-color: red;
}

.dropdown-contentL {
    display: none;
    position: absolute;
    background-color: #F9F9F9;
    width: 400px;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-contentL .header {
    background: red;
    padding: 16px;
    color: white;
}

.dropdownL:hover .dropdown-contentL {
    display: block;
}
/* Create three equal columns that floats next to each other */

.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: #CCC;
    height: 250px;
}

.column a {
    float: none;
    color: black;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.column a:hover {
    background-color: #DDD;
}
/* Clear floats after the columns */

.row::after {
    content: "";
    display: table;
    clear: both;
}

.navbar {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 46px;
    border: white 1px solid;
}

@media screen and (max-width: 768px) {
    .dropdownL {
        position: unset;
    }

    .dropdown-contentL {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

CodePudding user response：

How about playing with margins?, but take note: you need to deal with devices display also when adjusting margins, in that case, use media queries too.

    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
    }
    
    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    .dropdownL {
        float: left;
        overflow: hidden;
    }
    
    .dropdownL .dropbtnL {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font: inherit;
        margin: 0;
    }
    
    .navbar a:hover,
    .dropdownL:hover .dropbtnL {
        background-color: red;
    }
    
    .dropdown-contentL {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 400px;
        left: 0;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
    
    .dropdown-contentL .header {
        background: red;
        padding: 16px;
        color: white;
    }
    
    .dropdownL:hover .dropdown-contentL {
        margin-left:330px;
        display: block;
    }
    /* Create three equal columns that floats next to each other */
    
    .column {
        float: left;
        width: 33.33%;
        padding: 10px;
        background-color: #ccc;
        height: 250px;
    }
    
    .column a {
        float: none;
        color: black;
        padding: 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .column a:hover {
        background-color: #ddd;
    }
    /* Clear floats after the columns */
    
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .navbar {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 46px;
        border: white 1px solid;
    }

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div >
    <div >
        <div> <a href="#home">one</a></div>
        <div><a href="#news">Two</a></div>
        <div >
            <button >Three
         <i ></i>
           </button>
            <div >
                <div >
                    <h2> Menu</h2>
                </div>
                <div >
                    <div >
                        <h3>Category 1</h3>
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                    <div >
                        <h3>Category 2</h3>
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                    <div >
                        <h3>Category 3</h3>
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>