0

I have a fixed bottom navbar, my "links" list does not open on hover. when I can get it to open it opens down and not upwards. I did add bottom: 0; to the hover section in CSS and that didn't work.. any help would be appreciated -new to HTML and CSS, this will be for a school final project!

added bottom: 0; to the hover section in CSS tried commenting out sections to fix played around with margin/padding and tried a z function thing

link to the code https://codepen.io/wickedmango/pen/rNBQPNG

looking to have the "links list" open upwards, and to be in front of everything!!

Razneesh
  • 1,147
  • 3
  • 13
  • 29
GrizzledAlky
  • 25
  • 1
  • 6
  • https://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css Check out this one. – Tjade Sep 20 '19 at 15:25
  • Please include a [mre] in the question itself, not only on an external site. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do. – Heretic Monkey Sep 20 '19 at 18:57

2 Answers2

0

remove

overflow: hidden

from nav class

Add 

nav ul li:hover ul {
  bottom: 60px;
}
demkovych
  • 7,827
  • 3
  • 19
  • 25
0

Yes the issue was overflow hidden but you want to give the nav a z-index greater than anything so it can be in front of anything:

nav {
width: 100%;
height: 60px;
background-color: white;
position: fixed;
bottom: 0;
z-index: 100;

}

https://codepen.io/izzy_zeke/pen/bGbQzLg

Also if I may I would like to give you an advice and use css flex rather than doing something like floats to help you with better standards:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Riskbreaker
  • 4,621
  • 1
  • 23
  • 31