Question

以下是我用于下拉菜单的代码。它在Firefox中运行良好但在IE中有一个问题。 在IE 的菜单下留下约30像素的空白区域。请帮助解决此问题。

谢谢，

----- HTML CODE -----

<table width="79" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td  width="79" height="75" align="left" valign="top">
            <ul id="sddm"><li><a href="about.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()"><img src="./images/btn_about.jpg" border="0"/></a>
            <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
            <a href="event_calendar.php">Events</a>
            <a href="latest_updates.php">Updates</a>
    </div>
            </li></ul>
            <div style="clear:both"></div>
        </td>
    </tr>
</table>

----- CSS CODE -----

#sddm
{   
    margin: 0;
    padding: 0;
    z-index: 2;
}
#sddm li
{   
    margin: 0;
    padding: 0;
    list-style: none;
    float: center;
    font: 12px arial;
}
#sddm li a
{   
    display: block;
    margin: 0 0px 0 0;
    padding: 0px 0px;
    width: 0px;
    height:0px;
    background: #;
    font: 13px arial;
    color: #FFE792;
    text-align: center;
    text-decoration: none;
}
#sddm li a:hover
{   
    background: #;
}
#sddm div
{   
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #8A0058;
}
#sddm div a
{   
    position: relative;
    display: block;
    margin: 0;
    padding: 3px 4px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #B31C7C;
    color: #FFFFFF;
    font: 12px arial
}
#sddm div a:hover
{   
    background: #FF00A3;
    color: #FFFFFF;
}

----- JAVASCRIPT CODE -----

<script language="JavaScript" type="text/javascript">
var timeout = 500;
var closetimer  = 0;
var ddmenuitem  = 0;

// open hidden layer
function mopen(id)
{   
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}
// close layer when click-out
document.onclick = mclose; 
</script>

Answer 1

我在这个css类下添加了 position：absolute; 句子，它解决了这个问题。谢谢大家的建议和帮助。

谢谢，

----- CSS CODE -----

#sddm li
{   
    position:absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    float: center;
    font: 12px arial;
}

在IE中下拉菜单问题

1 个答案: