Выпадающее меню выровнено неправильно в IE7

Question

Я почти закончил оптимизацию моей таблицы стилей для IE7 (первый раз, когда я это делал), но все еще есть одна проблема. У меня есть раскрывающееся меню, которое отлично работает во всех других браузерах, включая IE8 +, но в IE7 оно не соответствует. По какой-то причине подменю выровнено по следующему пункту меню. Например; подменю из пункта 1 выровнен по пункту 2, подменю из пункта 2 выровнен по пункту 3 и т.д.

Вот мой HTML (partitial):

<div id="main_nav"> 
<ul id="main_nav_list"> 
    <li><a href="#">START</a> 
<ul> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">Twee</a></li> 
    <li><a href="#">Derde</a></li> 
    <li><a href="#">Laatste</a></li> 
</ul> 
</li> 
    <li><a href="#">LEVEN</a></li> 
    <li><a href="#">MOBILITEIT</a></li> 
    <li><a href="#">VRIJE TIJD</a></li> 
</ul> 
</div> 

А вот мой CSS (partitial):

#main_nav { 
float:right; 
height:40px; 
margin-left:6px; 
margin-top:90px; 
position:absolute; 
width:780px; 
} 

#main_nav_list li { 
display:inline; 
min-width:100px; 
position:relative; 
text-decoration:none; 
} 

#main_nav_list li a { 
color:#222; 
font-family:Absolut_Pro, Helvetica, sans-serif; 
font-size:1.1em; 
margin-left:5px; 
margin-right:10px; 
text-decoration:none; 
} 

#main_nav_list li a:hover { 
border-bottom:2px solid #db002a; 
color:#db002a; 
} 

#main_nav_list ul { 
background-color:#FFF; 
margin-top:20px; 
padding-top:20px; 
position:absolute; 
width:180px; 
} 

#main_nav_list ul li { 
background-image:url('images/list_bg.png'); 
background-repeat:no-repeat; 
background-position:4% 50%; 
border-bottom:1px dotted #666; 
float:left; 
font-size:0.7em; 
padding-left:15px; 
width:165px; 
} 

#main_nav_list ul a { 
display:block; 
font-family:Arial, Helvetica, sans-serif; 
padding:5px 0; 
} 

#main_nav_list ul a:hover { 
border:none; 
text-decoration:none; 
} 

Любые идеи?

Заранее спасибо

Answer 1

Добавьте эти из них:

#main_nav_list ul { 
margin:0; 
bottom:0; 
left:0 
}