我的下拉菜单在除IE7以外的所有浏览器上都能正常工作。为什么？
我的下拉菜单在除IE7以外的所有浏览器上都能正常工作。为什么？
提问于 2010-02-18 04:50:12
我正在做一些基于this tutorial的基本下拉菜单，所以除了IE7之外，它都很漂亮。当您将鼠标悬停在它上面时，它会出现，但当您将鼠标从主元素移动到它下面的元素时，它会再次隐藏。
/* General */
#cssdropdown { position:absolute; right:0px; top:0px; font-size:medium; font-weight:bold; }
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; color:Navy; text-decoration:none; }
/* Head links */
#cssdropdown li.headlink
{
width: 150px;
float: left;
background-color: #e9e9e9;
text-align: center;
height:35px;
}
#cssdropdown li.headlink a { display: block; padding:7px;} /*7px*/
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; text-align: left; background-color:#e9e9e9; }
/*#cssdropdown li.headlink:hover ul { display: block; }*/ <--I've tried this via JS below
#cssdropdown li.headlink ul li a { padding:5px;}
#cssdropdown li.headlink ul li a:hover { background-color: #333; color:White; }这是我根据他们的说明使用的jQuery，它将菜单显示为IE修复。(请注意，当我使用纯CSS或CSS & jQuery时，即使在IE7中也是如此。所有其他浏览器都工作得很好。
$(document).ready(function () {
$('li.headlink').hover(
function () { $('ul', this).css('display', 'block'); },
function () { $('ul', this).css('display', 'none'); });
});最后是我的HTML：
<ul id="cssdropdown">
<li class="headlink">
<a href="../Pages/MainMenu.aspx">Main Menu</a>
<ul>
<li><a href="www.google.com">Google</a></li>
<li><a href="www.yahoo.com">Yahoo</a></li>
<li><a href="www.msn.com">MSN</a></li>
</ul>
</li>
</ul>我确实有正确的jQuery链接。
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-02-18 04:59:06
从li.headlink和it will work中删除height:35px;。
Stack Overflow用户
发布于 2010-02-18 04:58:35
在他们的页面上，他们在其中一个示例中使用了普通的JS。当您尝试使用此代码而不是jquery代码时，它是否有效？
var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
for(i = 0; i < lis.length; i++)
{
var li = lis[i];
if (li.className == 'headlink')
{
li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
}
} Stack Overflow用户
发布于 2010-02-18 05:01:41
这似乎是IE z索引的问题。
在两个位置上设置z索引:相对元素header和content为fix：
#header {
z-index:2;
}
#content {
z-index:1;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2284284
复制相关文章
相似问题
腾讯云开发者
