I’m getting some strange hover behaviour from IE9 which seems to be resulting from positioning an element relative to a parent. It’s a bit difficult to explain so I’ve made a working example available here: http://jsfiddle.net/CVPhW/2/ I’ve stripped it out as much as I can but I left all the containing divs in there in case they were somehow relevant.
Try hovering your cursor over the very bottom of each button and you’ll see the hover doesn’t activate unless you move the cursor around 10 pixels upwards. It works fine in FF, Chrome and believe it or not, even IE6.
It’s something to do with the bottom: 12px; style applied to #menucontainer ul li a. If I remove that, the whole portion activates properly, but it’s not positioned correctly. The text position in that example is how I’d like it to be, but with a fix for the hovering.
Has anyone else encountered something like this before? I’ve been trawling SO and Google for an answer but I haven’t found anything remotely similar. I’d be really grateful for some help with this.
I forked your example here
it seems to work in all browsers. I changed a couple of styles on the
<li>and the<a>elements