Dropdown Selector not behaving in IE9

Question

I have this simple hidding dropdown that behaves perfectly in Firefox and Chrome, however when used in IE9 the options are not selectable.

<style media="screen" type="text/css">
.MainHN{
    top:120px;
    left:184px;
    display: block;
    width: 290px;
    height:100px;
    color: #BDBDBD;
    position:absolute; 
    background-color: #FFFFFF;
}
.MainHN:hover .IntHN {
    display: block;
    }
.IntHN{ 
    display: none;
    width: 300px;
    height:150px;
    margin: 0 auto;
    position: absolute;
}
.HiddingNode{ 
    width: 250px;
    height:70px;
    margin: 0 auto;
    background-color: #FDFBFB;
    color: #BDBDBD;
    padding:2px;
    border:2px solid;
    position: absolute;
}
</style>

<div class="MainHN"> 
    <div class="IntHN">
        <div class="HiddingNode">
            <form id="FAform" action="aaaa" method="post">
                <div>
                    <select id=FAselect name=FAselect>
                        <option selected="selected" value="233">Option A</option>
                        <option value="123">Option B</option>
                        <option value="1075">Option C</option>
                    </select>
                </div>
                <div>
                    <input type="submit" value="Save">
                </div>
            </form>
        </div>
   </div>
</div>

It works if I disable the hidding feature (display none/block) but that defeats the purpose. Any one knows the reason?

Answer 1

<select> is a replaced element, and as a result the UI elements may not be a part of the DOM itself. Therefore, when you mouse over an option, you are no longer hovering over the "main" element and it gets hidden. This causes the select to be hidden, and a hidden select can't be worked on by the user.

There's no easy fix to this, but consider using an onfocus event on the <select> to force the browser to keep it visible (apply a class to a parent element?) and of course onblur to cancel that.