html - IE 的菜单 CSS 问题

Question

我的菜单如下：

<ul id="nav">
                <li>
                    <a href="Area.aspx">AREAS&nbsp;›&lt;/a>
                    <ul style="margin-left: -20px">
                        <li><a href="AddArea.aspx">Add</a></li>            
                        <li><a href="ModifyArea.aspx">Modify</a></li>
                        <li><a href="DeleteArea.aspx">Delete</a></li>
                    </ul>
                </li>
                <br />
                <br />
                <li >    
                    <a href="Model.aspx">MODELS›&lt;/a>

                    <ul style="margin-left: -20px">
                        <li><a href="AddModel.aspx">Add</a></li>
                        <li><a href="ModifyModel.aspx">Modify</a></li>
                        <li><a href="DeleteModel.aspx">Delete</a></li>
                    </ul>

                </li>
                <br />
                <br />
                <li>    
                    <a href="View.aspx">VIEWS&nbsp;›&lt;/a>
                    <ul style="margin-left: -20px">
                       <li><a href="AddView.aspx">Add</a></li>
                        <li><a href="ModifyView.aspx">Modify</a></li>
                        <li><a href="DeleteView.aspx">Delete</a></li>
                    </ul>
                </li>              

</ul>

CSS：

#nav{
            list-style:none;
            font-weight:bold;
            margin-bottom:10px;   
            float:left;
            /*width:100%;*/
        }
        #nav li{
            /*float:left;*/
            margin-right:0px;
            position:relative;
        }
        #nav a{
            /*display:block;*/
            padding:5px;
            color:#fff;
            background:#ff7700;
            text-decoration:none;
        }
        #nav a:hover{
            color:#fff;
            background:#ff7700;
            text-decoration:underline;
        }

       /*--- DROPDOWN ---*/
        #nav ul{
            background:#fff; 
            background:rgba(255,255,255,0);
            list-style:none;
            position:absolute;
            left:-9999px;
        }
        #nav ul li{
            padding-top:5px; 
            float:none;
        }
        #nav ul a{
            white-space:nowrap; 
        }
        #nav li:hover ul{ /* Display the dropdown on hover */
            left:0; /* Bring back on-screen when needed */
            position: relative;
            z-index: 101;
        }
        #nav li:hover a{ 
            background:#ff7700;
            text-decoration:none;
        }
        #nav li:hover ul a{ 
            text-decoration:none;
        }
        #nav li:hover ul li a:hover{ 
            background:#ee6600;
            border-radius:3px;
        }

它在 Chrome 上运行良好，但在 IE 中，当我将鼠标悬停在菜单上时，项目不可见，如果显示某些内容但它们不可见，菜单确实会移动。我需要使它至少适用于 IE 8 版。¿任何帮助？

Answer 1

对于 IE 中的下拉菜单，您可以使用以下 JavaScript 代码。

将此代码放在您的头部

<!--[if IE]>
<script type="text/javascript" href="iehover.js">
<![endif]-->

和iehover.js

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

如果可行，现在让我来。