Проблема z-индекса с jquery .show () - PullRequest
Новая
       15

Проблема z-индекса с jquery .show ()

3 голосов
/ 28 июня 2011

У меня проблема с функцией jSuery .show ().

В верхней части моей веб-страницы есть панель навигации. Когда вы наводите курсор на последний элемент в панели навигации, под ним должно появляться всплывающее меню. Эта часть прекрасно работает.

Код jQuery выглядит так: 

$('#navbar li.etc').hover(
    function() { 
        $('#subnav').show();
        $('li.etc a.main').addClass('hover');
    },
    function() { 
        $('#subnav').hide(); 
        $('li.etc a.main').removeClass('hover');
    }
);

HTML-код выглядит так: 

<ul id="navbar">
    <li><a href="#">home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">developers</a></li>
    <li><a href="#">pricing</a></li>
    <li class="etc"><a class="main" href="#">etc &raquo;</a>
    <ul id="subnav">
        <li><a href="#">api</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">careers</a></li>
        <li><a href="#">twitter</a></li>
    </ul>
    </li>
</ul>

И CSS выглядит так: 

#navbar {
    position: absolute;
    height: 30px;
    /*width: 455px;*/
    right: 85px;
    bottom: 40px;
}

#navbar li {
    float: left;
    list-style: none;
    padding: 2px 5px 12px 5px;
    margin-right: 5px;
    border-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-border-radius: 5px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border: 1px solid #50A6C8;
}

    #navbar li.etc:hover {
        background: #9DD3E7;
        color: #203C4D;
        border: 1px solid gray;
    }

        #navbar li a {
            margin: 0px auto 0px auto;
            list-style: none;
            /*color: #325E77;*/
            color: white;
            font: 1.8em "Helvetica", "Lucida Grande", Serif;
            text-decoration: none;
        }

        #navbar li a:hover {
            color: #203C4D;

        }

        #navbar li a.hover {
            color: #203C4D;
        }

#subnav {
    display: none;
    position: absolute;
    right: 5px;
    top: 35px;
    width: 340px;
    border-radius: 5px;
    border-top-right-radius: 0px;
    -moz-border-radius: 5px;
    -moz-border-radius-topright: 0px;
    padding: 13px 13px 5px 13px;
    font: .9em "Helvetica", "Lucida Grande", Serif;
    background: #9DD3E7;
    z-index: 1;
    box-shadow: 5px 5px #888;
    -moz-box-shadow: 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    border: 1px solid gray;
}

#subnav li {
    float: left;
    list-style: none;
    margin: 0px auto 0px auto;
    border: none;
}

    #subnav li a {
        padding: 2px 8px 2px 8px;
        text-decoration: none;
        color: #325E77;
    }

    #subnav li a:hover {
            color: #203C4D;
    }

У меня проблема с границей и z-индексом. У меня есть граница для subnav div, а также граница сверху и сбоку элемента navbar. Я хотел бы, чтобы всплывающий субнап использовал .show () и отображался под элементом navbar («и т. Д.» На моей странице), чтобы он выглядел как единый цельный фрагмент. Но прямо сейчас, субнап выскакивает над последним элементом navbar, так что граница показывает. Вот онлайн пример:

[ссылка удалена]

Я много играл со свойствами z-index каждого элемента, но я просто не могу понять, что это правильно. Я нашел несколько ресурсов, посвященных какой-то проблеме, связанной с z-index и IE, но моя проблема существует в браузерах webkit и mozilla. Так что эти ресурсы не очень помогли мне.

У кого-нибудь есть предложение? Я рву волосы над этим! Спасибо!

1 Ответ

2 голосов
/ 28 июня 2011

Ваша проблема возникает из-за того, что subnav является дочерним элементом списка etc. поэтому он никогда не может быть «ниже», независимо от того, как вы играете свои z-индексы.

Что вы можете попытаться сделать, так это отсоединить его от положения <li> и расположить его абсолютно.

...