So again I am strugling with some problems. This time it is so that when I hover over the drop down menu from portfoilio (when the site is in mobile view mode) it will just go over the other elements, I tried making everything relative, removed the float and tried numerous other of things but nothing seemed to work. I want to prevent putting a margin under the parent of the drop down menu, because if I want to add more drop downs later that I then don't have to change my codes again.
Please note that the problem is at the mobile site view not the normal site view!
Thanks in advance!
Best How To :
The problem is that you've set
.navigation_menu > ul > li, so of course that's the only space that will be occupied.
Changing that to
line-height:30px is all that it takes to solve this problem. You can see it in action here. There are more 'elegant' ways of implementing such menu but that's a totally different matter and this isn't the place to talk about that.
Of course, this doesn't change the fact that there's no 'hover' for mobile (sometimes first tap is considered hover and second tap is click but if you have a link, the first tap can act as a click event). There's some jQuery scripts such as this which solves that problem.