IE select issue with hover

Question

A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.

Is there a workaround? At least with pure CSS or DOM hacks?

Answer 1

I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.

You can however work around it with Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $('.nav_element a').mouseover(function() {
            $('.submenu').hide();
            $(this).parent().find('.submenu').show();
        });

        $('.submenu').mouseover(function() {
            $(this).show();
        });

        $('.submenu').mouseout(function (e) {
            // Do not close if going over to a select element
            if (e.target.tagName.toLowerCase() == 'select') return;
            $(this).hide();
        });

    });    
</script>

The code above uses jQuery.