Kevin Powell - Community•2w ago

Drop down menu & position absolute sizing

Hey, I’ve never really looked too in depth into dropdown menus and decided it’s time haha, what’s an efficient way to “dock” them so they don’t sit off screen when the screen gets too small like in this example codepen? I saw the recent video Kevin made on it however due to the lack of browser support in things like anchor-positioning, I was wondering about more general approaches. Following that, I’ve never really noticed that position absolute makes elements min-content or if not something similar, what is it that shrinks a position absolute element and how do you effectively expand them back to an intrinsic size without setting a width/min width which presents overflow issues in some cases? https://codepen.io/deerCabin/pen/ogvbVKJ Thanks in advance

CodePen

dropdown menu example

...

5 Replies

vinter.•2w ago

I don't think there's an easy way to dynamically make sure it doesn't overflow. The easiest solution is just to do

a:hover + .dropdown,
.dropdown:hover {
  right: 0;
  display: block;
}

a:hover + .dropdown,
.dropdown:hover {
  right: 0;
  display: block;
}

This way you make sure that it's flushed with the screen.

vinter.•2w ago

Another option is to use :last-child and set the dropdown positioning only for the last element

snxxwyyOP•2w ago

interesting, what makes right: 0; not make it overflow?

vinter.•2w ago

You're just saying to position the div so that its right border is 0px from the right border of the parent

snxxwyyOP•2w ago

ahh and i assume the content expands to the right by default as it seems to dock to the left and right just reverses it

Gaming

Programming

Drop down menu & position absolute sizing