css - IE7中的下拉菜单对齐错误

Question

我几乎完成了 IE7 样式表的优化（我第一次这样做），但仍然存在一个问题。我有一个下拉菜单，它在所有其他浏览器（包括 IE8+）中运行良好，但在 IE7 中对齐错误。出于某种原因，子菜单在下一个菜单项下对齐。例如; 第 1 项的子菜单在第 2 项下对齐，第 2 项的子菜单在第 3 项下对齐，依此类推。

这是我的 HTML（部分）：

<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（部分）：

#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
}