I'm having an issue with a dropdown menu item in my navigation bar. The dropdown is set to position:absolute, but it's getting cut off. How can I ensure the dropdown stays below the link?
I've tried changing the position to fixed, but then the dropdown doesn't stay aligned with the hoverable link when scrolling down the page.
Below is the code snippet:
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'
})You can view the issue on Fiddle here.