Dropdown should appear right under the hovered element

Here is the pen: https://codepen.io/Supersudo/pen/zYGLKYJ

Currently, the dropdown-item is appearing at the bottom of the nav.


I want it to be like this.

Is there a way to do that other than setting top/bottom explicitly?

That is because the AP ul “dropdownItem” is contaned by not the parent li but the “navbar” as that is the nearest parent to have a position.

Try put position:relative on the parent item (li) and it will refer its position to that element. Then adjust for the arrow height by a top margin (in order to keep the 100% distance).

By the way, if you don’t want the link text to wrap you might need white-space:nowrap on the dropdown item.

2 Likes

Maybe give position:absolute a try and set the top: to negative something or try using margin-top: and give a negative something as well.

Hi lozusharez,

If I understand you right I guess you agree with me, though you are a bit vague. :wink: