Responsive dropdown menu help?

[kimbachu]

I've been stuck on this all day and I'm ready to ask for help: The desktop version of my dropdown menu works exactly as I want it to, but the mobile version expands downwards when hovering over a link and I can't seem to fix it. I think it has something to do with absolute/relative positioning but I've tried everything I can think of and nothing I've tried has worked.

Here's an example of the problem. The "Tutorials" link drops significantly when "Downloads" is hovered over.
Here's a live demo of my code: https://jsfiddle.net/kimbachu/0L1st82j/1/

It's probably a really easy fix, but I've been working on this all day and I can't get it to work so I'm grumpy and tired and could really use some help.

Thanks!

 

[haneko]

Hi Kimbachu My first instinct would also be to change the positioning. Since the sub menu is nested inside the main one, it will appear there by default once absolute positioning is removed. Try setting the position attribute to initial (so that it goes back to the default instead of using absolute)?

Also, what have you tried doing so far?

 

[kyeugh]

changing the position property of the #menu ul li ul.sub rule to absolute and reverting the top property to 0 or removing it fixed this for me:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

 

[kimbachu]

Thanks for your help, guys. It was indeed positioning that was causing the issue, @kyeugh's tip helped and then I realised I needed to add position: relative to #menu ul li and that fixed it entirely.