CSS下拉菜单悬停不显示在IE 7

我一直盯着我的代码几个小时，似乎无法弄清楚为什么我的下拉悬停菜单根本没有显示在IE 7中。当我悬停在菜单上，下拉菜单根本不显示。它在firefox，chrome，safari和IE 8中工作正常。我基本上认为自己知道我所知道的一切，所以我是一个新手。我搜索了四周，并阅读了一些关于添加一些JavaScript，但似乎并没有工作...除非我可能忽略某些错误或错过的东西，但任何帮助将不胜感激....漂亮请:)并提前致谢！CSS下拉菜单悬停不显示在IE 7

这里的CSS：

#navmenu { 
height:50px; 
position:relative; 
width:950px; 
z-index:1; 
top:-142px; 
margin:0;} 

#navmenu ul { 
margin:0; 
padding:0; 
line-height:50px; 
position:relative; 
float:left;} 

#navmenu li { 
margin: 0; 
padding: 0; 
list-style: none; 
float: left; 
position: relative;} 

#navmenu ul li a { 
height:50px; 
width:auto; 
    display:block; 
padding:0 20px 0 21px;} 

#navmenu ul ul { 
position:absolute; 
visibility:hidden; 
top:50px; 
z-index:1;} 

#navmenu ul li:hover ul, #navmenu ul li.sfhover: { 
visibility:visible; 
z-index:9999; 
display:block;}

和JavaScript的我发现我放在头：

<script type="text/javascript"> 
sfHover = function() { 
var sfEls = document.getElementById("navmenu").getElementsByTagName("LI"); 
for (var i=0; i<sfEls.length; i++) { 
    sfEls[i].onmouseover=function() { 
     this.className+=" sfhover"; 
    } 
    sfEls[i].onmouseout=function() { 
     this.className=this.className.replace(new RegExp(" sfhover\\b"),  ""); 
    } 
} 
} 
    if (window.attachEvent) window.attachEvent("onload", sfHover); 
    </script>

来源

2012-09-06 Zee

'#navmenu ul li：hover ul，#navmenu ul li.sfhover：'那末尾的冒号应该在那里吗？你也可以创建一个jsFiddle –

你可以尝试将 “缩放：1” 添加到您的UL-元件。这大多解决了IE中类似的问题。

来源

2012-09-06 06:39:08 Kevin

嗯，我试过，它仍然没有工作....任何其他的想法？ – Zee

你可以做的是创建一个没有JavaScript的纯粹的基于CSS的菜单。看到这个教程：http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/希望适用于你。 – Kevin

谢谢！但我相信我目前的菜单已经是纯粹的基于CSS的，我只添加了JavaScript来修复IE 7的bug，希望能够解决这个问题......但是它并没有让我仍然相当难过...：/ – Zee

CSS下拉菜单悬停不显示在IE 7

回答

相关问题