【问题标题】:CSS Drop Down Menu Hover Not Showing in IE 7IE 7 中不显示 CSS 下拉菜单悬停
【发布时间】:2012-09-06 06:32:29
【问题描述】:

我已经盯着我的代码几个小时了,似乎无法弄清楚为什么我的下拉悬停菜单在 IE 7 中根本没有显示。当我悬停菜单时,下拉菜单没有完全出现。它在 firefox、chrome、safari 和 IE 8 中运行良好。我基本上认为自己是我所知道的一切,所以我是一个完全的新手。我四处搜索并阅读了有关添加一些 javascript 的内容,但这似乎不起作用...除非我可能忽略了某些错误或遗漏了某些东西-但任何帮助将不胜感激....非常感谢 0:)并提前感谢!

这是 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>

【问题讨论】:

  • #navmenu ul li:hover ul, #navmenu ul li.sfhover: 后面的冒号应该在那里吗?你也可以创建一个jsFiddle

标签: drop-down-menu internet-explorer-7 hover


【解决方案1】:

您可以尝试将“缩放:1”添加到您的 ul 元素。这主要解决了 IE 中的类似问题。

【讨论】:

  • 您可以做的是创建一个基于 CSS 的纯菜单,而无需使用 JavaScript。请参阅本教程:csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu 希望对您有用。
  • 谢谢!但我相信我当前的菜单已经是纯基于 CSS 的,我只添加了 JavaScript 来修复 IE 7 错误,希望能解决问题……但事实并非如此,所以我仍然很困惑……:/跨度>
  • 没关系!我设法找出了问题......这是一些与下拉菜单冲突的渐变背景颜色代码......奇怪。
猜你喜欢
  • 2020-06-10
  • 1970-01-01
  • 2016-11-11
  • 1970-01-01
  • 2013-01-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-29
相关资源
最近更新 更多