CSS下拉菜单定位在IE7中

Question

我有一个CSS只有下拉菜单，在firefox和chrome中工作正常。子菜单直接排列在父母的下方。但是，在IE7中，它们位于旁边。

CSS：

/* MENU LEVEL 1 */ 
#nav-img { padding-top: 4px; } 
#main-nav { 
height: 30px; /* set to the height you want your menu to be */ 
margin: 0 0 10px; /* just to give some spacing */ 
width: 600px; 
display: inline-block; 
font-family: Tahoma, Geneva, sans-serif; 
font-size: 10pt; 
text-transform: uppercase; 
} 
#main-nav ul { 
margin: 0; padding: 0; /* only needed if you have not done a CSS reset */ 
} 
#main-nav li { 
display: block; 
border: 1px solid #000; 
float: left; 
line-height: 30px; /* this should be the same as your #main-nav height */ 
height: 30px; /* this should be the same as your #main-nav height */ 
margin: 0; padding: 0; /* only needed if you don't have a reset */ 
position: relative; /* this is needed in order to position sub menus */ 
} 
#main-nav li a { 
display: block; 
height: 30px; 
line-height: 30px; 
padding: 0 15px; 
} 
#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover { 
color: #000; 
} 
/* MENU LEVEL 2 */ 
.sub-menu { 
text-transform: none; 
} 
#main-nav ul ul { /* this targets all sub menus */ 
display: none; /* hide all sub menus from view */ 
position: absolute; 
top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */ 
} 
#main-nav ul ul li { /* this targets all submenu items */ 
float: none; /* overwriting our float up above */ 
width: 240px; /* set to the width you want your sub menus to be. This needs to match the value we set below */ 
} 
#main-nav ul ul li a { /* target all sub menu item links */ 
padding: 5px 10px; /* give our sub menu links a nice button feel */ 
} 
#main-nav ul li:hover > ul { 
display: block; /* show sub menus when hovering over a parent */ 
} 

HTML：

<div id="main-nav"> 

<ul> 
<li><a href="a href="#"">Home</a></li> 
<li><a href="a href="#"">Services</a> <br /> 
    <ul class="sub-menu"> 
    <li><a href="#">Commodities</a></li> 
    <li><a href="#">Professional Practice</a></li> 
    <li><a href="#">Shipping</a></li> 
    <li><a href="#">Commercial</a></li> 
    <li><a href="#">Corporate Structure</a></li> 
    <li><a href="#">Dispute Resolution and Arbitration</a></li> 
    <li><a href="#">International Employment</a></li> 
    <li><a href="#">Financial Re-structuring</a></li> 
    <li><a href="#">Intellectual Property</a></li> 
    </ul> 
</li> 
<li><a href="#">Team</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Testimonials</a></li> 
<li><a href="#">Contact</a></li> 
</ul>   

任何帮助将非常感激。

Answer 1

试试这个;

#main-nav ul ul { 
display: none; /* hide all sub menus from view */ 
position: absolute; 
top: 30px; /* this should be the same height as the top level menu -- height + padding borders */ 
left: 0; 
} 

IE7需要一个左值。