पृष्ठभूमि स्लाइडर का उपयोग करते समय मेनू पर होवर गायब हो जाता है: निश्चित और जेड-इंडेक्स

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> 

सीएसएस:

#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 कहा जाता है। अगर मैं स्लाइडर को हटा देता हूं तो सबकुछ काम करता है!

मैं इसे आईई की जेड-इंडेक्स बग पतला करता हूं लेकिन मैंने सफलता के बिना position: relative; जोड़कर विभिन्न विकल्पों का प्रयास किया। मैं IE में तय होवर प्रभाव कैसे प्राप्त करूं?

मैं इस जे एस कोड की कोशिश की, लेकिन यह मदद नहीं करता है या तो:

$('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 आप परियोजना डाउनलोड कर सकते हैं। मैंने एक और बात देखी। यदि मैं इंटरनेट एक्सप्लोरर शुरू करता हूं तो वह मुझसे पूछता है कि क्या मैं स्क्रिप्ट या सक्रिय-एक्स तत्वों को शुरू करना चाहता हूं। वह मुझसे क्यों पूछता है? मुझे पता है क्योंकि यह स्लाइडर है लेकिन यह सामान्य जावास्क्रिप्ट होना चाहिए। शायद स्लाइडर से जेएस कुछ खास करता है ...

Answer 1

सेड्रिक रिचेंबैक ने मुझे एक और विचार पर लाया। एक पारदर्शी पृष्ठभूमि छवि (1x1) जोड़ना IE के लिए काम करता है:

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

हालांकि इसका परीक्षण अधिक होगा।

Answer 2

मैं IE10 IE9 & पर काम भी 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; 
} 

और IE7 के लिए और इसके बाद के संस्करण काम 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]--> 

नीचे

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

इस- को ऊंचाई और चौड़ाई जोड़ा चारों ओर सिर्फ एक ठोस सफेद के साथ पारदर्शी RGBA बदल देता है। यह प्राचीन आईई में सुंदर नहीं होगा, लेकिन कुछ चीजें कभी भी हैं।

ध्यान दें, कि <nav> IE8 में और नीचे

Answer 3

उपयोग स्थिति समर्थित नहीं है: निरपेक्ष यह :-)