css drop down div not working in IE9

问题:

I have a div that when you mouseover has a child div appear to display information. The basic 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(specifically IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. don't know why its not working with the div. Here is a link to the live page here. The mouse over div is the facebook like button near the bottom of the page.

回答1:

it's the page loaded in the iframe not having a transparent background which causes the hover to fail in IE.