CSS | Dropdown at bottom of page is cut off

Question

I have a website with a dropdown at the bottom, but when I click it to open it, it doesn't show up because (I assume) it is below the page. My two options are to have the page expand slightly when the dropdown is clicked, or to have the dropdown open upwards. link

I have tried doing:

overflow: scroll;

and

bottom: 100%

Unfortunately I can only edit the css of the website, which means I cannot add or remove elements. You also have to be logged in to see the dropdown, not much I can do about that. Feel free to create an account with a spam email or something. Sorry about that.

Answer 1

I see you already picked another answer, but I might suggest trying to pop "up" instead of down.

If you simply change the .tebexDropdown { top: -52px; } you can have it appear above, instead of below. Note that you might have to make that CSS offset different based upon how many items are in the list, of course.

Also .tebexDropdown:before { border-bottom: 10px solid #bfbfbf; top: 33px } for styling.

Gives you this:

Answer 2

i cannot see the dropdown, but you can have your dropdown showing upwards with pure css, see this question/answer

i hope it can help