Наведение на меню исчезает при использовании фонового слайдера с позицией: фиксированный и z-индекс

я узнал, что эффект наведения из главного меню исчезает, если я хочу перейти на второй уровень меню. Здесь вы найдете пример:

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. если я удаляю слайдер, все работает!

Я думаю, что это ошибка z-Index IE, но я пробовал разные варианты, добавив 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; чем он работает лучше, но это не тот дизайн, который должен быть.

Edit:

здесь вы можете скачать проект. Я заметил еще кое-что. Если я запускаю Internet Explorer, он спрашивает меня, хочу ли я запустить сценарии или Активные-Х элементов. Почему он меня об этом спрашивает? Я знаю, что это потому, что слайдер, но это должен быть обычный Javascript. Возможно, JS из слайдера делает что-то особенное ...

3 ответов


у меня он работает на 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 и ниже


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

хотя проверит его больше.


использовать позицию: абсолютная она будет работать : -)