Suckerfish 之子 CSS 导航菜单在 IE7 中不起作用

Question

无法用语言表达我的沮丧，我无法让 IE7 中的下拉菜单在父项下对齐。它们适用于所有其他浏览器 ~ 包括 IE8 ~ 但 IE7...

菜单的下拉部分显示在 ie7 中父项的右侧。

有人可以帮忙吗？

这是 css:

/* ----------------------------------- navigation ----------------------------------------- */
/* -----------------------------------    main    ----------------------------------------- */

#mainnav ul, #mainnav ul li, #mainnav ul li a {display:block;float:left;list-style:none;width:100%;margin:0;padding:0;}


#mainnav ul li {
    width:auto;
}

#mainnav ul li a {
    width:auto;
    color:#000;
    text-decoration:none;
    font: 400 14pt/52px 'Crimson Text', serif;
    text-transform: uppercase;
    overflow:hidden;
    display:block;
    float:left;
}

#mainnav ul li a span {
    display:inline;
    float:left;
    cursor:pointer;
    overflow:hidden;
    padding:0px 18px 0px 0px;
    margin: 0px 0px 0px 18px;
}

#mainnav ul li:hover, #mainnav ul li a:hover, #mainnav ul li.active a {
    color:#fff;
    background:transparent url(/assets/images/layout/nav-button-sprite.png) no-repeat top left;
}

#mainnav ul li:hover a span, #mainnav ul li a:hover span, #mainnav ul li.active a span {
    background:transparent url(/assets/images/layout/nav-button-sprite.png) no-repeat right top;
    color:#fff;
}

/* ----------------------------------- navigation ----------------------------------------- */
/* ----------------------------------- drop downs ----------------------------------------- */

#mainnav ul li ul { /* second-level lists */
    position: absolute;
    background: url(/assets/images/layout/drop-down-seventy-percent.png) repeat;
    width: 208px;
    top:52px;
    float:left;
    left: -9999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}


#mainnav ul li ul li a, 
#mainnav ul li ul li a span, 
#mainnav ul li ul li a:hover, 
#mainnav ul li ul li a:hover span {
    padding:0;
    margin:0;
    background-image:none;
    color:#fff;
    font: 12px/16px Arial, Helvetica, sans-serif;
    text-transform: capitalize;
}

#mainnav ul li ul li a, 
#mainnav ul li ul li a span  {background-image:none !important;}

#mainnav ul li ul li a span, #mainnav ul li ul li a:hover span {width:200px;padding:4px 0px 4px 8px;}
#mainnav ul li ul li a:hover span {background-color:#88273c;}

#mainnav ul li:hover ul, #mainnav ul li.sfhover ul {
    left: auto;
    }

这是 html:

<div id="mainnav">
    <ul>
        <li   class="first level-1"><a href="http://ccsind.com/"><span>Home</span></a></li>
        <li   class="level-1"><a href="about-us/"><span>About Us</span></a>
            <ul>
                <li   class="first level-2"><a href="about-us/what-we-do.html"><span>What We Do</span></a></li>
            </ul>
        </li>
    </ul>
</div>

太沮丧了...... -肖恩

Answer 1

将 left: auto 更改为 left: 0:

#mainnav ul li:hover ul, #mainnav ul li.sfhover ul {
    left: 0;
}

并添加 position:relative：

#mainnav ul li {
    width: auto;
    position: relative;
}