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
}

IE7中的下拉菜单对齐错误

1 个答案: