html - 下拉菜单在IE中无法正确显示

我有一个导航栏，它在Chrome＆Mozilla中可以完美地工作，但是在IE中不能正常工作。

当您将鼠标悬停在“关于我们”选项卡上时，下拉列表应该会出现，但会直接插入。而且背景位置不正确。
请帮助

代码：
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>

请帮忙。

最佳答案

我在#nav li ul li中添加了float：left和clear，如下所示

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

这是在IE中工作的演示-> http://jsfiddle.net/5kWJz/

关于html - 下拉菜单在IE中无法正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17311737/