IE bug with hover on select and options - css

Question

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 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.

Answer 1

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/