I have a menu with a dropdown in one of the items. I'm using position:absolute on the dropdown div, but it is being cut off.

How can I make the dropdown stay below the link?

I tried changing to position:fixed, but the dropdown div doesnt stay below the hoverable link if I scroll the page down

Here is my code:

dropdownItem.addEventListener('mouseover', () => {
    dropdownList.style.display = 'block'
    dropdownList.style.opacity = 1;
    dropdownList.style.visibility = 'visible'
    dropdownList.style.marginTop = '-5px'
})

dropdownItem.addEventListener('mouseout', () => {
    dropdownList.style.opacity = 0;
    dropdownList.style.visibility = 'hidden'
    dropdownList.style.marginTop = '1rem'
})

/* Theming */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root{
    --white: #f9f9f9;
    --black: #36383F;
    --grey: #85888C;
}

/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: var(--white);
    font-family: "Poppins", sans-serif;
   
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

.header {
    background-color: var(--black);
    box-shadow: 1px 1px 5px 0px var(--grey);
    position: sticky;
    top: 0;
    width: 100%;
}

.nav{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--black);
    overflow: hidden;    
}

.nav{
    height: 100%;
    transition: height .5s ease-out;
}

.menu {
    display: flex;
    justify-content: end;
}

.menu a{
    display: block;
    padding: 30px;
    color: var(--white);    
}

.menu p {
    display: block;
    padding: 30px;
    color: var(--white);
}

.menu li:hover{
    background-color: var(--grey);
}

.dropdownList {
    position: absolute;
    background: #ededed;
    width: 100%;    
    visibility:hidden;
    opacity:0;
    transition:all 0.2s linear;
    margin-top: 1rem;   
}

.dropdownList a {
    color: #36383F;
}

<header >                 
        <nav >
            <ul >
                <li><a href="#">Gallery</a></li>
                <li  id="dropdownItem">
                    <p>Areas</p>
                    <div  id="dropdownList">
                        <a href="#">Sub-Area 1</a>
                        <a href="#">Sub-Area 2</a>
                        <a href="#">Sub-Area 3</a>
                        <a href="#">Sub-Area 4</a>
                    </div>                        
                </li>
                <li><a href="#">Blog</a> </li>               
                <li><a href="#">About</a></li>                   
            </ul>
        </nav>
    </header>

You can see it happening on Fiddle Fiddle

CodePudding user response：

The reason it's being cut off is because you explicitly told it to do that by setting overflow: hidden; on the parent .nav element. Remove it and it will work.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow