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有不同的边距和填充而不是它们应该具有的问题。有时候我遇到了这个问题而且与位置有关：绝对属性（你把它放在某个地方，特别是在使用边距时）。我没有检查过你的整个代码，但是在一些情况下我得到了它解决了父母有位置相对而不是绝对，有时甚至是两者的组合......

Answer 2

这是由于菜单项的宽度造成的。下拉列表将移动，例如如果您有一个宽度为100px的菜单项，则向右100px。在IE7中使用左右填充来避免此问题。

IE7中的Suckerfish下拉菜单对齐的儿子

2 个答案: