IE的菜单CSS问题[关闭]答案

【问题标题】：Menu CSS problems with IE [closed]IE的菜单CSS问题[关闭]
【发布时间】：2023-03-24 02:04:01
【问题描述】：

我的菜单如下：

<ul id="nav">
                <li>
                    <a href="Area.aspx">AREAS&nbsp;›</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›</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;›</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 版。¿任何帮助？

【问题讨论】：

............具体是什么不起作用？
悬停效果不显示项目。

标签： html asp.net css browser menu

【解决方案1】：

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

把这段代码放在你的 head 部分

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

还有 iehover.js

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

如果可行，现在让我来。

【讨论】：