IE8 div visible on hover but disappears when inline select has focus

I have a tag <div>that, when the user hovers over it, displays a hidden form contained within the nested tag <div>. The problem is that when the user navigates to the tag <select>inside the form, the changed focus (?) Causes the browser to lose hover on the tag <div>. Not a problem in every browser except our good friend IE, which returns a nested tag <div>in its hidden state.

Here's JsFiddle: http://jsfiddle.net/3qVv7/3/

HTML:

<div id="button_box"><h2>Hover This</h2>
    <div id="form_box">
        <form action="#" method="post">
            <select id="select_option" onChange="Javascript:doSomething();">
                <option value="a">Value A</option>
                <option value="a">Value B</option>
                <option value="a">Value C</option>
                <option value="a">Value D</option>
                <option value="a">Value E</option>
            </select>
        </form>               
    </div>
</div>

CSS

#button_box {
     display:block; 
     width: 150px; 
     height: 75px; 
     position:relative; 
     background: #ddd;
}

#button_box h2 {
     text-align: center
}

#button_box #form_box {
     display: none; 
     position:relative; 
     top: 51px; 
     width: 150px; 
     background: #ccc
}

#button_box:hover #form_box {
     display:block
}

#form_box select { 
     background: #bbb 
}​

Any suggestions on how I can get a selection nested in a hidden div so as not to kill the hover state?