Dropdown menu aligned wrong in IE7

I'm almost finished optimizing my stylesheet for IE7 (First time I've ever done it), but there still is one problem. I have a dropdown menu, which is working perfectly fine in all other browsers, including IE8+, but which is aligned wrong in IE7. For some reason, the submenu is aligned under the next menu item. For example; the submenu from item 1 is aligned under item 2, submenu from item 2 is aligned under item 3 etc.

Here's my 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>

And here's my 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;
}

Any ideas?

Thanks in advance

Answers


Add these ones:

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

Need Your Help

What is the difference between managed tomcat and embedded tomcat?

tomcat tomcat7 tomcat6 jboss-arquillian

I am not sure that I understand the difference between these two types of tomcats (embedded and managed).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.