Alignement du menu déroulant Son of Suckerfish dans IE7

Question

J'ai utilisé le menu déroulant Son of Suckerfish sur mon site Web. Il semble bien dans tous les navigateurs (y compris IE8 et ci-dessus), mais quand IE7, lorsque je passe la souris sur le bouton, le menu déroulant n'apparaît pas sous le bouton. Au lieu de cela, il apparaît à la droite du bouton selon l'image ci-dessous. Je ne sais vraiment pas pourquoi IE7 est encore en vie mais oui, les clients l'utilisent encore.

est ici l'image: http://i.stack.imgur.com/w1L95.png

Voici mon 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> 

Voici mon 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

Une conjecture sauvage pourrait être une question avec les marges négatives, ayant souvent différentes les comportements entre les navigateurs, et pourrait également être une certaine largeur, comme IE7 et 6 avaient des problèmes avec des marges et des paddings différents plutôt que ce qu'ils devraient avoir. Parfois, j'ai eu ce problème et était lié à la position: absolu atribute (vous l'avez quelque part, surtout lorsque vous utilisez des marges). Je n'ai pas examiné votre code entier, mais dans plusieurs cas je l'ai résolu en faisant un parent avoir une position relative plutôt qu'absolue, et parfois même une combinaison des deux ...

Answer 2

Ceci est dû à la largeur de vos éléments de menu. La liste déroulante se déplacera, par ex. 100px vers la droite si vous avez un élément de menu avec une largeur de 100px. Utilisez un rembourrage gauche et droite pour éviter ce problème dans IE7.