How to make drop-down menu appear over a combobox in IE6?

问题

I'm facing a problem in IE6 :

My website contains a drop-down menu and some pages contains comboboxes. When I roll-out a menu and it's covering a combobox, the combobox always appears over the menu !

My website is to be used exclusively on IE6, so I want to solve this problem on IE6 and make the drop-down menu apprear OVER the combobox in such situations.

Here is a code snippet that illustrates the problem :

<html>
<body>
<!-- Menu -->
<table width="20%" border="0" style="position:relative; z-index:100;">
    <tr>
        <td colspan="0">

            <table  style="background-color: #40668C; color: white; z-index:100;" width="100%">
                <tr>
                    <td>Agenda</td>
                </tr>

                <tr>
                    <td>
                        <table 
                            align="right" 
                            valign="top" 
                            width="100%" 
                            height="100%" 
                            style=" visibility: visible; 
                                    position: absolute; 
                                    background-color: #40668C;  
                                    color: white; 
                                    top: 21px; 
                                    z-index:100;">

                            <tr><td>Personnal</td></tr>
                            <tr><td>Group</td></tr>
                            <tr><td>Day</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- Combobox -->
<form style="z-index: 0;">

    <TABLE style="z-index: 0;">

        <TR style="z-index: 0;">
            <TD style="z-index: 0;">
                <TABLE style="z-index: 0;">
                    <TR style="z-index: 0;">
                        <TD>Combobox :</TD>
                        <TD style="z-index: 0;">
                            <SELECT style="z-index: 0;">
                                <OPTION></option>
                                <OPTION>Element 1</option>
                                <OPTION>Element 2</option>
                            </select>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</form>

</body> 
</html>

I know this problem has already been reported and it's because of IE6 but unfortunately, I tried different solutions so far without any success.

Thanks in advance !

回答1:

This is the result of a z-index bug in IE6. Select elements are given a high z-index, so they always appear in front of other elements.

A quick way to fix this is to hide the select when your menu is open. You can call a function like this when you open the menu:

function hide_select(myelement){  
    var select = document.getElementById('myelement');  
    if(select.style.visibility == "hidden")  
    {  
        select.style.visibility="visible"  
    }else{  
        select.style.visibility="hidden";  
    }  
}

Reference: http://www.tinyqueen.com/web-site-design/ie6-select-z-index-bug-a-workaround

回答2:

It's an IE6 bug.

There is no way around it other than setting the combo-box's CSS attribute display: none; while hovering on the dropdown, and setting it visible again otherwise.

来源：https://stackoverflow.com/questions/6034301/how-to-make-drop-down-menu-appear-over-a-combobox-in-ie6

标签

html

css

combobox

internet-explorer-6

drop-down-menu