当使用具有position：fixed和z-index的背景滑块时，将菜单上的悬停消失

Question

如果我想要转到第二个菜单级别，我发现主菜单中的悬停效果消失。这里您可以找到例子：

http://bfb.bplaced.net/ie/

HTML：

<div id="background-slider"> 
    <a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/Opera-Background-Blue-Swirls.jpg"></a> 
    <a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/green-abstract-background.jpg"></a> 
</div> 
<div id="menu"> 
    <nav> 
     <ul class="nav-level-1"> 
      <li class="level-1 clearfix"> 
       <a href="unternehmen.html" class="level-1">Unternehmen</a> 
       <ul class="nav-level-2"> 
        <li class="level-2"><a href="/unternehmen/die-firma.html" class="level-2">Die Firma</a></li> 
        <li class="level-2"><a href="/unternehmen/das-team.html" class="level-2">Das Team</a></li> 
        <li class="level-2"><a href="/unternehmen/allgemeines.html" class="level-2">Allgemeines</a></li> 
       </ul> 
      </li> 
     </ul> 
     <div class="clearer"></div> 
    </nav> 
</div> 
<div id="script-section" class="hidden"> 
    <script src="./js/jquery.superbgimage.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      // Options for SuperBGImage 
      $.fn.superbgimage.options = { 
       transition: 1, 
       speed: 'slow', 
       randomtransition: 0, 
       slideshow: 1, 
       slide_interval: 6000, 
       randomimage: 0 
      }; 

      // initialize SuperBGImage 
      $('#background-slider').superbgimage().hide; 
     }); 
    </script> 
</div> 

CSS：

#menu { 
    position: fixed; 
    z-index: 4; 
    left: 23px; 
    bottom: 40px; 
} 

ul.nav-level-1 { 
    float: left; 
    text-align: left; 
} 

ul.nav-level-1 li.level-1 { 
    /*float: left;*/ 
} 

ul.nav-level-1 li.level-1 a.level-1 { 
    font-family: 'SourceSansProBlack', Arial, sans-serif; 
    font-size: 36px; 
    line-height: 40px; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #123373; 
    padding: 0 5px; 
    transition: color 0.25s ease 0s, background-color 0.25s ease 0s; 
    float: left; 
} 

ul.nav-level-1 li.level-1 a.level-1:hover { 
    text-decoration: none; 
    color: #123373; 
    background-color: #FFF; 
    display: inline-block; 
} 

ul.nav-level-1 li:hover a { 
    background-color: #FFF; 
} 

ul.nav-level-1 li.level-1:hover ul.nav-level-2 { 
    display: block; 
} 

ul.nav-level-2 { 
    display: none; 
    float: left; 
    width: 390px; 
    padding-left: 10px; 
    text-align: left; 
} 

ul.nav-level-2 li.level-2 { 
    margin-bottom: 3px; 
    margin-right: 5px; 
    float: left; 
} 

ul.nav-level-2 li.level-2 a.level-2{ 
    font-family: 'SourceSansProBold', Arial, sans-serif; 
    font-size: 14px; 
    line-height: 16px; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #123373; 
    padding: 0 5px; 
    background-color: #FFF; 
    transition: color 0.25s ease 0s, background-color 0.25s ease 0s; 
} 

ul.nav-level-2 li.level-2 a.level-2:hover{ 
    background-color: #123373; 
    color: #FFF; 
} 

我使用滑块被称为SuperBGImage。 如果我删除滑块一切正常！

我瘦它是IE的Z-Index错误，但我尝试了不同的选项，通过添加position: relative;没有成功。我如何获得在IE中固定的悬停效果？

我想这JS代码，但它并没有帮助：

$('li.level-1').hover(function() { 
    $(this).children('ul.nav-level-2').removeClass('hidden'); 
    $(this).children('ul.nav-level-2').addClass('visible'); 
}); 
$('ul.nav-level-2').mouseout(function() { 
    $(this).removeClass('visible'); 
    $(this).addClass('hidden'); 
}); 

也许这是一个浮动的问题。如果我删除float: left;比它更好，但它不是它应该是的设计。

编辑：

Here您可以下载该项目。我注意到另一件事。如果我启动Internet Explorer，他会问我是否要启动脚本或Active-X元素。他为什么问我呢？我知道这是因为滑块，但它应该是正常的Javascript。也许从滑块的JS在这里做一些特别的...

Answer 1

CedricReichenbach给我带来了另一种想法。添加透明背景图像（1x1）似乎适用于IE：

.level-1 ul { 
    background-image: url(../img/transparent-background.png); 
    background-repeat: repeat; 
} 

虽然会对其进行更多测试。

Answer 2

我知道了在IE9 &工作IE10 也应该在IE8工作，使用透明背景和悬停.clearfix

退房更新 - jsFiddle

我改变了这种 -

ul.nav-level-1 li.level-1 a.level-1:hover { 
    text-decoration: none; 
    color: #123373; 
    background-color: #FFF; 
    display: inline-block; 
} 

对此-

.clearfix:hover ul.nav-level-1, li.level-1, a.level-1{ 
    text-decoration: none; 
    color: #123373; 
    background: rgba(0, 0, 0, 0.0); /*** TRANSPARENT BACKGROUND FIX ***/ 
    display: inline-block; 
} 

而加入的高度和宽度，以这 -

.clearfix { 
    display:block; 
    width:100%; /* added height and width */ 
    height:50px; 
} 

为IE7和下面添加 -

<!--[if lte IE 7]> 
    <style type="text/css"> 
.clearfix:hover ul.nav-level-1, li.level-1, a.level-1 { 
    text-decoration: none; 
    color: #123373; 
    background:#ffffff; 
    display: inline-block; 
} 
    </style> 
<![endif]--> 

上述工作只是左右替换与固体白色透明RGBA。它在古代IE中不会那么漂亮，但是很少有事情可以做到。

注意，那<nav>不支持在IE8及以下

Answer 3

使用position：绝对会工作:-)