Question

我创建了一个下拉菜单，可以在Opera，FF，Chrome和Safari中正常使用但是，它在IE 8中不起作用。

您可以在此处看到菜单：http://sanabygg.stiengenterprises.com - 菜单项Systemgulv。

任何人都可以告诉我为什么这不起作用吗？

您可以看到解决方案的沙箱：http://jsfiddle.net/bCJKd/2/

从我看到的情况来看，这不是z-index问题。

这是我正在使用的CSS：

#mainmenu
{
  display: block;
  line-height: 30px;
  height: 30px;
  font-size: 1.3em;
  text-transform: uppercase;
  font-family: Cuprum, Georgia, Times, Arial, serif;  
  float: right;
  padding-top: 43px;
  position: relative;
  z-index:auto;
}

/* Sub navigation */
#menu-main-menu ul.sub-menu {
  position: absolute;
  z-index:999;
  min-width: 130px;
  visibility:hidden;
  padding-bottom: 5px;
  color: #fff;
  font-size: 0.80em;
  padding: 5px; 
  background-color: rgba(0, 0, 0, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);

}

#menu-main-menu li:hover ul, #menu-main-menu li li:hover ul, 
#menu-main-menu li li li:hover ul, #menu-main-menu li.sfhover ul, 
#menu-main-menu li li.sfhover ul, #menu-main-menu li li li.sfhover ul {
    visibility: visible;
}

Answer 1

将父div的z-index属性设置为auto。如果未在IE中设置position和z-index属性，则对于所有父div，将忽略子div的z-index。希望你明白我的意思。

如果您的代码中有多个位置：相对元素，那么IE会为每个位置设置单独的Z层上下文，这些上下文会互相忽略。

Answer 2

@Cthulhu说了什么，检查你想要悬停的项目的尺寸是值得的，因为它在IE中将与其他浏览器不同。

为什么我的下拉菜单不能在IE中运行？

2 个答案: