Il passaggio del mouse sul menu scompare quando si utilizza il dispositivo di scorrimento di sfondo con posizione: fissa e z-index

Question

Ho scoperto che l'effetto di passaggio del mouse dal menu principale scompare se voglio passare al secondo livello di menu. Qui trovate l'esempio:

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; 
} 

Il cursore che sto usando è chiamato SuperBGImage. Se rimuovo il cursore tutto funziona!

I thin è il bug z-Index di IE ma ho provato diverse opzioni aggiungendo position: relative; senza successo. Come faccio a correggere l'effetto hover in IE?

Ho provato questo codice JS, ma non aiuta:

$('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'); 
}); 

Forse è un problema di galleggiante. Se rimuovo float: left; di quello che funziona meglio, ma non è il design che dovrebbe essere.

Edit:

Here è possibile scaricare il progetto. Ho notato un'altra cosa. Se avvio Internet Explorer, mi chiede se voglio avviare gli script o gli elementi Active-X. Perché me lo chiede? So che è perché il cursore, ma dovrebbe essere normale Javascript. Forse il JS del cursore fa qualcosa di speciale qui ...

Answer 1

CedricReichenbach mi ha fatto venire in mente un'altra idea. L'aggiunta di un'immagine di sfondo trasparente (1x1) sembra funzionare per IE:

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

Anche se lo testerà di più.

Answer 2

ho ottenuto che funziona su IE9 & IE10 dovrebbe funzionare anche in IE8, con sfondo trasparente e si libra sopra .clearfix

Scopri i aggiornato - jsFiddle

Ho cambiato questa -

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

A questo-

.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; 
} 

E altezza e larghezza aggiunto alla this-

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

per IE7 e sotto add

<!--[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]--> 

che questo lavoro intorno solo sostituisce la RGBA trasparente con un solido bianco. Non sarà bello nell'Io antico, ma poche cose lo sono mai.

nota, che <nav> non è supportato in IE8 e sotto

Answer 3

Uso position: absolute funzionerà :-)