@elaineleung
Posted
Hey Ahmad, well done in building together this solution! To answer your question about why things shift when you click on the dropdown, it's because the dropdown has a position: relative. That means that when it appears, its height is part of the header height, and so everything shifts according to that height change.
To fix this in the desktop view, simply change the position property in .dropdown to position: absolute instead and add position: relative to your .primary-navigation li selector, so that the browser knows which parent to anchor .dropdown. to in the positioning. You may also have to change the left and top properties as you see fit. I'd also suggest adding a width: max-content; to make sure the content takes the whole width and not need to be pushed to the next line. For the mobile view, be sure to keep that position: relative in the .dropdown when clicked, like how you had it.
Hope this helps you out!
Marked as helpful
