Выпадающее меню не отображается правильно в IE

Question

У меня есть панель навигации, которая отлично работает в Chrome & Mozilla, но не работает должным образом в IE.

Когда вы наводите указатель мыши на вкладке «Нам», выпадение должно появиться, но его входящая линия. а также неправильное положение фона. Pls Помощь

Код: CSS:

#nav { 
    width : auto; 
    height : 25px; 
    margin : 10px auto; 
    padding : 5px; 
} 

#nav ul { 
    margin : 17px auto; 
    padding : 0px; 
    text-align: center; 
} 

#nav ul li { 
    display: inline-block; 
    list-style: none; 
} 

#nav ul li a { 
    text-decoration :none; 
    color: #175587; 
    font-size: 15px; 
    width : auto; 
    padding: 5px 1px 5px 1px; 
    height: 35px; 
    box-shadow: 3px 3px 8px gray;  
    background: url(../images/listback.png); 
} 

#nav ul li a:hover, #nav ul li a.current { 
    background: url(../images/hoverback.png); 
    color: white; 
} 

#nav li ul { 
    display: none; 
    position: absolute; 
} 

#nav li:hover ul { 
    display: block; 
    z-index: 10; 
    margin: 0px 0px 0px 0px; 
    background: url(../images/down2.png) no-repeat; 
    background-position: 13% 5%; 
    padding: 65px 0px 0px 0px; 
} 

#nav li ul li { 
    float: none; 
    display: block; 
} 

#nav li ul li a { 
    width: 155px; 
    height: auto; 
    margin: 0px 0px 0px 0px ; 
    padding: 5px 0px 5px 5px; 
    float: left; 
    background : rgba(29, 71, 113, 0.8); 
    font-size: 15px; 
    text-align: left; 
    text-decoration: none; 
    font-weight: bold; 
    color: white;  
    text-transform: uppercase; 
    outline: none; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    display: block; 
} 

HTML: -

<div id="nav"> 
    <ul> 
     <li><a href="index.html" class="current">Home</a> 
     </li> 
     <li><a href="">About Us</a> 

      <ul> 
       <li><a href="profile.html">Group Profile</a> 
       </li> 
       <li><a href="management.html">Management Profile</a> 
       </li> 
       <li><a href="milestones.html">Milestones</a> 
       </li> 
       <li><a href="vision.html">Vision & Missions</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="">AGP</a> 
     </li> 
     <li><a href="">Products</a> 
     </li> 
     <li><a href="">Infrastructure</a> 
     </li> 
     <li><a href="">Support</a> 
     </li> 
     <li><a href="">Culture</a> 
     </li> 
     <li><a href="">Certification</a> 
     </li> 
     <li><a href="">Contact Us</a> 
     </li> 
    </ul> 
</div> 

Пожалуйста, помогите.

Answer 1

Я добавил поплавок: левый и ясно, как к #nav литий-уль литий (как показано ниже)

#nav li ul li { 
    float:none; 
    display:block; 
    float:left; 
    clear:both; 
} 

Вот демо работает в IE ->http://jsfiddle.net/5kWJz/