我的菜单如下:
<ul id="nav">
<li>
<a href="Area.aspx">AREAS ›</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 ›</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 版。¿任何帮助?