Выравнивание выпадающего меню Son of Suckerfish в IE7 - PullRequest
Новая
       27

Выравнивание выпадающего меню Son of Suckerfish в IE7

0 голосов
/ 25 апреля 2011

Я использовал выпадающее меню 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;
}

Ответы [ 2 ]

0 голосов
/ 14 июня 2012

Это связано с шириной пунктов вашего меню. Раскрывающийся список переместится, например, 100 пикселей вправо, если у вас есть один элемент меню шириной 100 пикселей. Чтобы избежать этой проблемы в IE7, используйте отступы влево и вправо.

0 голосов
/ 25 апреля 2011

Диким предположением может быть некоторая проблема с отрицательными полями, часто имеющая различное поведение в разных браузерах, а также может быть некоторая ширина, так как IE7 и 6 имели проблемы с разными полями и отступами, а не с тем, что они должны иметь.Иногда у меня возникала эта проблема, и она была связана с позицией: абсолютный атрибут (он у вас где-то есть, особенно при использовании полей).Я не пересмотрел весь ваш код, но в некоторых случаях я решил, что родитель имеет относительную позицию вместо абсолютной, а иногда даже комбинации обоих ...

...