Css drop down div not working in IE9

Question

I have a div that when you hover over a child div displays the information. The main code is as follows:

HTML

<div id="container"> <div id="hidden_div"> <iframe></iframe> </div> </div> 

CSS

 #container { position: absolute; height: 20px; width: 40px; top: 8px; left: 30px; } #hidden_div { position: absolute; background: url(../_images/inside_btn_back.png) repeat; height: 60px; width: 350px; top: 0px; left: 0px; margin-top: 20px; z-index: 50; display: none; border: 1px solid #a08f89; } #container:hover #hidden_div, #container.over #hidden_div, #container:focus #hidden_div { display: block; } 

This works in all browsers except IE (in particular, IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. I don’t know why it does not work with div. Here is the link to the live page here . The mouse above the div is the facebook button located at the bottom of the page.

Answer 1

This is a page loaded in an iframe that does not have a transparent background that causes it to freeze in IE.