Drop Down Menu not showing properly in IE - html

Question

I have a navigation bar, which works perfect in Chrome & Mozilla, but does not work properly in IE.
When you hover the mopue on about us tab, the drop down should come, but its coming inline. and also the background position is not correct.
Pls Help
Code :
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>Home
</li>
<li>About Us
<ul>
<li>Group Profile
</li>
<li>Management Profile
</li>
<li>Milestones
</li>
<li>Vision & Missions
</li>
</ul>
</li>
<li>AGP
</li>
<li>Products
</li>
<li>Infrastructure
</li>
<li>Support
</li>
<li>Culture
</li>
<li>Certification
</li>
<li>Contact Us
</li>
</ul>
</div>
Please Help.

Answer 1

I added float:left and clear both to #nav li ul li (shown below)
#nav li ul li {
float:none;
display:block;
float:left;
clear:both;
}
Here's a demo working in IE -> http://jsfiddle.net/5kWJz/