下拉菜单移位，仅在IE中

Question

我有一个简单的下拉菜单，仅使用HTML和CSS。奇怪的是，当我在所有浏览器上本地预览时，它工作正常。当我上传到网络服务器或通过网络驱动器查看（暂时存储在那里）时，除了在Internet浏览器中移动子菜单之外，一切都很好，因此无法点击。猜猜我很困惑为什么这在本地工作......这是代码：

HTML：

<div id="nav"> 
<ul> 
<li><a href="Main1.htm">Main1</a> 
        <ul> 
        <li><a href="Submenu1.htm">Submenu1a</a> 
                <ul> 
                <li><a href="Submenu2a.htm">Submenu2</a></li> 
                <li><a href="Submenu2b.htm">Submenu2b</a></li> 
                <li><a href="Submenu2c.htm">Submenu2c</a></li>
                </ul> 
        </li> 
        <li><a href="Submenu2.htm">Submenu2</a></li> 
        </ul> 
</li>

<li><a href="Main2.htm">Main2</a></li> 
<li><a href="Main3.htm">Main3</a></li>
</ul>

CSS：

#nav {
        float: left;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
        overflow: hidden;
}

#nav ul {
        margin:0;
        padding:0;
        list-style:none;
}

#nav ul li {
        float:left;
}

#nav ul li a {
    float: left;
    color: #000000;
    padding: 11px 21px;
    text-decoration: none;
    background-color: #FFFFFF;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;

}

#nav li ul {
        background:#C3C4BE;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 200px;
        z-index: 9999;
}

#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 160px;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
}

#nav ul li a:hover,
#nav ul li:hover > a {
    color: #252525;
    background-color: #C3C4BE;
}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color: #252525;
        background: #FFFFFF;

}



#nav li:hover ul {
        left: auto;
}


#nav li li ul {
        margin: -1px 0 0 160px;
        visibility:hidden;
}

#nav li li:hover ul {
        visibility:visible;
}

任何帮助表示赞赏！非常感谢。