IE bug with hover on select and options

I'm trying to make a hover on a div but when I hover a option the hover of div is affected.

Example code:

<div class="levelThreeMenuColumnTwo" id="clientFormMenu">
    <div 开发者_StackOverflow中文版class="formMenuPFS">
        <select name="select1">
            <option value="TN">
                Tennessee
            </option>
            <option value="VA" selected="selected">
                Virginia
            </option>
            <option value="WA">
                Washington
            </option>
            <option value="FL">
                Florida
            </option>
            <option value="CA">
                California
            </option>
        </select>
    </div>
 </div>
<style>
.formMenuPFS{
    display:none;
    background-color:red;
    width:110px;
    height:110px;
    position:absolute;
    left:200px;
}
.levelThreeMenuColumnTwo:hover .formMenuPFS{
    display:block;
}
.levelThreeMenuColumnTwo{
    display:block;
    background-color:green;
    width:200px;
    height:200px;
}
</style>

Woking in FF but not in IE.

Correct behaviour: When hover green div show red div. When hover select or option keep showing red div.

If javascript is needed I can use dojo 1.4. Thank you.

I know this is an old problem but I had the same problem I fixed it the following way in your jsbin. Instead of using the CSS :hover I used the jQuery hover and add an event.stopPropagation() too the select.

JS

$(document).ready(function(){
    $(".levelThreeMenuColumnTwo").hover(function() {
        $('.formMenuPFS').show();
        $('.formMenuPFS select').mouseleave(function(event) { event.stopPropagation(); });
    }, function() {
        $('.formMenuPFS').hide();
        $('.formMenuPFS select').mouseleave(function(event) { event.stopPropagation(); });
    });
});

jsbin http://jsbin.com/xitafazoca/