Search code examples
htmlcssbuttondrop-down-menucss-position

Dropdown menu distorts other buttons

after hovering over the "Projects" button I want it to roll down the drop down menu without distorting the size of other buttons and to push the footer down at the same time. Any help would be greatly appreciated.

Thank you.

:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 5% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 150%;
    text-decoration: none;
    display: block;
    width: 27%;
    text-align: center;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: black;
    flex-grow: 1;
}

/* Project dropdown */
.dropdown .home_button {
    width: 100%;
    padding: 20% 10%;
    box-sizing: border-box;
}

.dropdown {
    position: relative;
    width: 27%;
}

.project_menu {
    display: none;
    background-color: transparent;
    border: 2px solid white;
    box-sizing: border-box;
    margin-top: 2px;    
}

.project_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project_menu li a {
    color: white;
    padding: 5%;
    display: block;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}

.project_menu li a:hover {
    color: var(--orange);
}

.dropdown:hover .project_menu {
    display: block;
    position: relative;
    width: 100%;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="buttons_home">
                <button class="home_button">About</button>
                <button class="home_button">Resume</button>
                
                <div class="dropdown">
                    <button class="home_button">Projects</button>
                    <div class="project_menu">
                        <ul>
                            <li><a href="projects.html">Kalkulacka</a></li>
                            <li><a href="projects.html">Projekt2</a></li>
                            <li><a href="projects.html">Projekt3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2024</p>
        </div>
    </div>
</body>
</html>

with relative position here is the result enter image description here

I tried to change the position to absoulute, which doesn't affect the buttons, but doesn't push down the footer.

.dropdown:hover .project_menu {
    display: block;
    position: absolute;
    width: 100%;
}

With absolute positionning enter image description here

What it should look like after hovering over the "Projects" button :

here is the expected result enter image description here

Solution

  • Add align-items: flex-start, which will align your buttons to the start of the container:

    .buttons_home {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Add this */
    gap: 5%;
    margin-top: 10%;
}

    Also don't change .dropdown:hover .project_menu to position: absolute;. Keep it at position: relative.