Przywołanie w menu zniknie, gdy użyjesz suwaka tła z pozycją: stała i z-index

Question

Okazało się, że efekt znikający z menu głównego znika, jeśli chcę przejść do drugiego poziomu menu. Tutaj znajdziesz przykład:

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

Suwak używam nazywa SuperBGImage. Po usunięciu suwaka wszystko działa!

Wyczuwam, że jest to błąd z IE, ale próbowałem różnych opcji, dodając position: relative; bez powodzenia. Jak mogę poprawić efekt zawieszania w IE?

Próbowałem ten kod JS, ale to nie pomaga:

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

Być może jest to kwestia pływaka. Jeśli usuniemy float: left; niż działa lepiej, ale nie jest to projekt, który powinien być.

Edit:

Here można pobrać projekt. Zauważyłem inną rzecz. Jeśli uruchomię Internet Explorera, zapyta mnie, czy chcę uruchomić skrypty lub elementy Active-X. Dlaczego mnie o to pyta? Wiem, że to dlatego, że suwak, ale powinien być normalny JavaScript. Być może JS z suwaka robi tu coś wyjątkowego ...

Answer 1

CedricReichenbach przyniósł mi inny pomysł. Dodanie przezroczystego obrazu tła (1x1) wydaje się działać dla IE:

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

Chociaż będzie to bardziej testować.

Answer 2

mam go pracujących na IE9 & IE10 powinny również działać w IE8, stosując przezroczyste tło i unoszące się nad .clearfix

Sprawdź aktualizowana - jsFiddle

Zmieniłem to -

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

Do tego -

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

I dodaje wysokość i szerokość do this-

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

dla IE7 i poniżej Dodaj-

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

powyższych prac wokół tylko zastępuje przejrzystego rgba z solidną biały. To nie będzie tak piękne w starożytnym IE, ale niewiele jest rzeczy.

Zauważ, że <nav> nie jest obsługiwana w IE8 i poniżej

Answer 3

Korzystanie z position: absolute będzie działać :-)