html - IE8 div はホバー時に表示されますが、埋め込まれた選択にフォーカスがあると消えます

Question

ユーザーがその上にカーソルを合わせると、ネストされたタグ<div>内に含まれる非表示のフォームが表示される<div>タグがあります。問題は、ユーザーがフォーム内でタグを使用しようとすると、変更されたフォーカス (?) によってブラウザーが含まれているタグ<select>のホバーを失うことです。ネストされたタグを非表示の状態に<div>戻す IE を除いて、すべてのブラウザーで問題はありません。<div>

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 
}​

ホバー状態を殺さないように、非表示の div にネストされた選択を取得する方法についての提案はありますか?