css - Son of Suckerfish 下拉菜单在 IE7 中的对齐方式

Question

我在我的网站上使用了 Son of Suckerfish 下拉菜单。它在所有浏览器(包括 IE8 及更高版本)中看起来都很好，但是在 IE7 中，当我将鼠标悬停在按钮上时，下拉菜单不会出现在按钮下方。相反，它显示在按钮的右侧，如下图所示。

我真的不知道为什么 IE7 仍然存在，但是是的，客户仍在使用它。

这是图片:http://i.stack.imgur.com/w1L95.png

这是我的 HTML

<div id="menutop">
        <div id="menu">
    <ul id="drops">
        <li><a href="index.html" class="home" id="active1">Home</a></li>
        <li><a href="#" class="details">Details</a>
        <ul class="drop">
        <li><a href="location.html">> Location</a></li>
        <li><a href="connectivity.html">> Connectivity</a></li>
        <li><a href="technology.html">> Technology</a></li>
        <li><a href="sustainability.html">> Sustainability</a></li>
        <li><a href="community.html">> Community</a></li>
        </ul>
        </li>

        <li><a href="#" class="choices">Choices</a>
        <ul class="drop">
        <li><a href="bungalow.html">> Bungalow</a></li>
        <li><a href="semi.html">> Semi-detached</a></li>
        <li><a href="townhouse.html">> Town House</a></li>
        <li><a href="terrace.html">> Terrace</a></li>
        <li><a href="condo.html">> Condominium</a></li>
        </ul>
        </li>
    </ul>

        <div class="clear"></div>
        </div>
</div>

这是我的 CSS

#menutop{
    background:#003c57 url(images/menubg.jpg);
    background-repeat:repeat-x;
    height:35px;
    width:auto;
    }
#menu{
    margin:0 0 0 150px;
}
#menu a.home, #menu a.details, #menu a.choices{
    float:left;
    background:url(images/menubuttons.jpg) no-repeat;
    height:35px;
    text-indent:-99999px;
}
#menu a.home{
    background-position: 0px 0px;
    width:141px;
}
#menu a.details{
    background-position: -141px 0px;
    width:290px;
}
#menu a.choices{
    background-position: -431px 0px;
    width:290px;
}
#menu a.home:hover{
    background-position:-0px -35px;
}
#menu a.details:hover{
    background-position:-141px -35px;
}
#menu a.choices:hover{
    background-position:-431px -35px;
}
#menu a#active1{
    background-position:-0px -70px;
}
#menu a#active2{
    background-position:-141px -70px;
}
#menu a#active3{
    background-position:-431px -70px;
}   
#drops, #drops ul {
    padding:0;
    margin:0;
    clear:both;
    float:left;
    width:inherit;
    list-style:none;
    }   
#drops ul.drop {
    background:#000;
    opacity:0.9;
    padding:5px;
    width:280px;
    clear:both;
    margin-top:35px;
    z-index:999;
    }
#drops ul.drop li {
    width:inherit;
    clear:both;
    padding:5px 0 5px 0;
    }   
#drops ul.drop a {
    color:#fff;
    font-size:16px;
    text-decoration:none;
    font-weight:normal;
    clear:both;
    float:left;
    }

#drops ul.drop li:hover {
    background-color:#003c57;
    }   
#drops a {
    display: block;
    /*width: 10em;*/
    float:left;
    clear:both;
    width:150px;
}
#drops li {
    float: left;
    /*width: 10em;*/
}
#drops li ul {
    position: absolute;
    width: 10em;
    left:-999em;
}
#drops li:hover ul {
    left:auto;
}
#drops li:hover ul, #drops li.sfhover ul {
    left:auto;
}

Answer 1

一个疯狂的猜测可能是负边距的一些问题，通常在浏览器之间有不同的行为，也可能是一些宽度，因为 IE7 和 6 有不同的边距和填充问题，而不是他们应该有的问题。有时我遇到过这个问题并且与 position:absolute 属性有关(你在某个地方有它，特别是在使用边距时)。我没有审查你的整个代码，但在一些情况下我解决了它，因为父级具有相对位置而不是绝对位置，有时甚至是两者的组合......