IE7에서 CSS 드롭 다운 메뉴 사용

Question

나는 파이어 폭스와 크롬에서 잘 작동하는 CSS만의 드롭 다운 메뉴를 가지고있다. 하위 메뉴는 부모 바로 아래에 있습니다. 그러나 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은 왼쪽 값이 필요합니다.