/* Son of Suckerfish Dropdowns. JS needed only for
   Internet Explorer. Documented here:
   http://www.htmldog.com/articles/suckerfish/dropdowns/*/
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    /* Create an array of all <select> tags on the page (could be limited to 
    those within an element with a specific id -- see line above. */
    var selects = document.getElementsByTagName("select"); 
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
            for (var n=0; n<selects.length; n++) {
                /* Hides <select> tags, which appear above menu in IE */
                selects[n].className+=" hide_select";
            }
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            for (var n=0; n<selects.length; n++) {
                /* Makes <select> tags visible again */
                selects[n].className = selects[n].className.replace(new RegExp(" hide_select\\b"), "");
            }
        }
    }
}

/* 
 * NOTE: In order for this snippet to work, you need to add the 
 * following lines (or something similar) to your CSS:
 *
 * select.hide_select {
 *     visibility: hidden;
 * }
 *
 * Using "display: none" may cause other elements to shift as the is 
 * completely removed from the flow of the document. By using
 * "visibility: hidden", the just becomes "invisible."
 */

/* Son of Suckerfish Dropdowns. JS needed only for
   Internet Explorer. Documented here:
   http://www.htmldog.com/articles/suckerfish/dropdowns/*/
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    /* Create an array of all <select> tags on the page (could be limited to 
    those within an element with a specific id -- see line above. */
    var selects = document.getElementsByTagName("select"); 
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
            for (var n=0; n<selects.length; n++) {
                /* Hides <select> tags, which appear above menu in IE */
                selects[n].className+=" hide_select";
            }
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            for (var n=0; n<selects.length; n++) {
                /* Makes <select> tags visible again */
                selects[n].className = selects[n].className.replace(new RegExp(" hide_select\\b"), "");
            }
        }
    }
}

http://www.htmldog.com/articles/suckerfish/dropdowns/

In Internet Explorer, it's a well-known issue that  tags are rendered above other layers and things like drop-down menus. This fix is specifically for the "Son of Suckerfish" drop-down menus (see URL), which are entirely CSS-based (JS is needed only for Internet Explorer). However, it could be adapted for use with similar drop-down menus. The lines I added to the original js are "var selects" and the two "for" loops with comments.

Be sure to read the note at the end of this script.

Fix for 'menu under select' issue in IE

ie

JavaScript