I'm having trouble creating a drop-up menu with w3.css. What I'm trying to do is have a drop-up menu as the second element from the right on a footer fixed to the bottom of the viewport.
Here's what I have so far:
<footer class="w3-bar" style="position: fixed; bottom: 0;">
<span class="w3-bar-item">Button 1</span>
<span class="w3-bar-item">Button 2</span>
<span class="w3-bar-item w3-right">(Date Here)</span>
<div class="w3-dropdown-hover w3-right" style="position: relative; bottom: 0;">
<button class="w3-bar-item w3-button w3-hover-theme">Change Theme</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-d4" style="min-width: 100%; right: 0; bottom: 100%;">
<a href="#" class="w3-bar-item w3-button">Theme 1</a>
<a href="#" class="w3-bar-item w3-button">Theme 2</a>
<a href="#" class="w3-bar-item w3-button">Theme 3</a>
<a href="#" class="w3-bar-item w3-button">Theme 4</a>
</div>
</div>
</footer>
It works exactly as I want (it puts the drop-up menu right on top of the button, which is placed where I want it), except the options aren't visible (because they overflow above the footer bar).
Here's a link to a fiddle-like thing, I changed the "bottom" property of my w3-dropdown-content to 50% so you can see the bottom of the menu. https://www.w3schools.com/code/tryit.asp?filename=GCKK95EG0T44
Thanks by advance to anyone who'd try to help :)
Edit : I've still haven't found a way to have it show as I want. By changing the position of my w3-dropdown-hover element to absolute, the drop-up menu displays correctly, but the item is added to the left of the bar, instead of the right.
