Сын Suckerfish CSS навигационные меню не работают в IE7 - PullRequest
Новая
       33

Сын Suckerfish CSS навигационные меню не работают в IE7

0 голосов
/ 29 августа 2011

Разочарованный вне всяких слов, у меня возникают проблемы с тем, чтобы выпадающие списки в 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>

так расстроен .... -sean

1 Ответ

2 голосов
/ 29 августа 2011

Измените 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;
}
...