:hover is not working properly in IE9

user_774002 0
Viewed 26440

I have a simple CSS dropdown menu with an iframe inside it. When I hover my mouse over the dropdown menu, the menu drops down. But when my mouse hovers the iframe inside the menu, the menu goes back. Here's a simplified version of my code:

<div id="comments">
  <a href="#" class="btn">View comments</a>
  <div id="comment-wrap">
    <iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
  </div>
</div>

<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>

This works in the latest versions of FF, Chrome, and Opera.

P.S. The dropdown menu remain dropped down when my mouse is hovering the padding of #comment-wrap.

hover internet-explorer iframe css
4 Answers

I found to have the same problem and i know this is already an old post but i felt like i had to publish my solution. Basicly IE does not accept the :hover event for any tags other than <a> with specified href (wont work on early ie versions), unless you add <!DOCTYPE HTML> at the top. And that was it! Problem solved :).

user_16968970
Related