Son of Suckerfish dropdown menu alignment in IE7 - css

Question

I used Son of Suckerfish dropdown menu on my website. It looks fine in all browsers (including IE8 and above) but when in IE7, when I hover on the button, the dropdown menu does not appear below the button. Instead, it appears to the right of the button as per the image shown below.
I really don't know why IE7 is still alive but yes, clients are still using it.
Here's the image: http://i.stack.imgur.com/w1L95.png
Here is my HTML
<div id="menutop">
<div id="menu">
<ul id="drops">
<li>Home</li>
<li>Details
<ul class="drop">
<li>> Location</li>
<li>> Connectivity</li>
<li>> Technology</li>
<li>> Sustainability</li>
<li>> Community</li>
</ul>
</li>
<li>Choices
<ul class="drop">
<li>> Bungalow</li>
<li>> Semi-detached</li>
<li>> Town House</li>
<li>> Terrace</li>
<li>> Condominium</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
Here is my 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

A wild guess could be some issue with the negative margins, often having different behaviors between browsers, and also could be some width, as IE7 and 6 had problems with different margins and paddings rather than what they should have. Sometimes I have had this problem and was related with the position:absolute atribute (you have it somewhere, specially when using margins). I have not reviewed your entire code, but in several cases I got it solved doing a parent have position relative instead of absolute, and sometimes even combinations of both...

Answer 2

This is due to the width of your menu items. The dropdown will move e.g. 100px to the right if you have one menu item with a width of 100px. Use a left and right padding to avoid this problem in IE7.