I will start with saying that I'm not terribly experienced, so I'm sure my code is not very "clean" :-)
The page I am talking about can be viewed here:
http://www.fordesignpurposes.com/so/00menu.html
CSS link:
http://www.fordesignpurposes.com/so/style.css
Anyway: I am trying to build a responsive menu which consists of several image-buttons which change upon hover. However, I've discovered that the hover/link will only occur when hovering over the top 30% of the buttons. Hovering on the button below that threshold, it goes dead.
There is a media query to separate the buttons on two rows once the screen becomes too small, but interestingly enough both rows then still exhibit the same problem (instead of only the top 30% of the top row working, for instance).
From searching similar SO questions I am suspecting there is a conflict with an overlaying div, but for the life of me I cannot figure out where the problem lies. Can anyone help me with this?
Another question is probably really simple, but I can't seem to figure that out either. As I mentioned above, on smaller screen the menu changes to two rows. I would like to move the bottom row closer to the top, but I can't make it happen. What is the correct combination of positioning I should be using in elements for this?
I hope I'm not asking too much!
Height of your images are 0px currently thats why hovering only works on top of the image.(not even 30 percent). You should set height or change your line-height property (set to non-zero value for ex: 20px in your case)
I took another look and saw your anchors are floated. try to clear your floats. that should work too