Dropdown should appear right under the hovered element

[Chronzam]

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?

[Erik_J]

@Chronzam

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

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.

[lozusharez]

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.

[Erik_J]

Hi lozusharez,

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