выпадающее меню должно отображаться поверх всего, но оно находится под определенным - PullRequest
Новая
       13

выпадающее меню должно отображаться поверх всего, но оно находится под определенным

3 голосов
/ 01 февраля 2009

У меня есть выпадающее меню, и оно отлично работает на всех, кроме IE6 и IE7.

Вот CSS для div, где он скрывается под IE 6/7 

#featured-programs-left img,
#featured-programs-right img{
    overflow:auto;
    border:0;
}

#featured-programs-left,
#featured-programs-right {
    height:625px;
    float:left;
    overflow:auto;
    clear:left;
    clear:right;
    width:100%;
}

#featured-programs-left div,
#featured-programs-right div {
    overflow:auto;
    clear:left;
    clear:right;
    width:352px;
    height:345px;
}

#featured-programs-left {
    float:left;
}

#featured-programs-right {
    float:right;
}

Вот jQuery (в исходном коде вы увидите несколько div внутри каждого основного div (featured-Programs-left & -right), а jQuery постепенно отображает каждый вход и выход в цикле) для отображения нескольких элементов (затухает элементы внутри и снаружи) внутри обеих сторон div (# featured-Programs-Left & # Featured-Programs-Right) 

<script type="text/javascript">
$(document).ready(function() {
    $('#featured-programs-left').cycle({ 
        fx:     'fade', 
        speed:  'slow',
        timeout: 15000,
        next:   '#next2',
        prev:   '#prev2' 
    });
});

$(document).ready(function() {
    $('#featured-programs-right').cycle({ 
        fx:     'fade', 
        speed:  'slow',
        timeout: 21000,
        next:   '#next3',
        prev:   '#prev3' 
    });
});
</script>

Вот CSS для быстрых ссылок (быстрые ссылки - это выпадающее меню ссылок) 

#header-nav-top li#quicklinks a:link,
#header-nav-top li#quicklinks a:visited,
#header-nav-top li#quicklinks a:active {
    padding-left: .9em;
    background: transparent url('/site/images/quicklinks_bullet.gif') no-repeat 0em .5em;
}

#header-nav-top li#quicklinks.hover {
    position: relative;
}

#header-nav-top li#quicklinks ul {
    position: absolute;
    display: none;
    xleft: -9999em;
    top: 14px;
    width: 142px;
    padding:5px 2px 5px 5px;
    z-index: 90;
    margin: 0px;
    background-color: #00693E;
    xborder: 1px solid #FDBE2F;
    xborder-width: 0px 1px 1px;
}

#header-nav-top li#quicklinks:hover ul,
#header-nav-top li#quicklinks.hover ul {
    left: 0px;
    display: block;
}

#header-nav-top li#quicklinks ul li {
    background: transparent none;
    float: none;
    margin: 0px 0px 0px;
    line-height: 1.4em;
    display: block;
    border:1px solid #00693E;
}

#header-nav-top li#quicklinks ul li a:link,
#header-nav-top li#quicklinks ul li a:visited,
#header-nav-top li#quicklinks ul li a:active {
    color: #fff;
    display: block;
    text-decoration: none;
    background: transparent none;
}

#header-nav-top li#quicklinks ul li a:hover {
    color: #C26B1A;
    background: transparent url('/site/images/bullet_link.gif') no-repeat 0% 6px;
}

Что, по вашему мнению, может приводить к тому, что в IE 6/7 в выпадающем меню Featured-Programs-Left & Featured-Programs-Right не отображается выпадающее меню?

Ответы [ 2 ]

6 голосов
/ 01 февраля 2009

Вы пытались установить z-index изображения, которое в настоящее время скрывает ваше меню, скажем, 0? У вас есть тестовый URL, на который мы можем посмотреть? В качестве альтернативы, на основании того, что IE неправильно обрабатывает z-index, у вас есть возможность позиционировать HTML вашего выпадающего меню после других элементов на странице, минуя, таким образом, z-index?

РЕДАКТИРОВАТЬ: Ах, очевидно, есть ошибка. Эта ссылка может объяснить, если не поможет ...

Цитата из MrTazz:

При запуске специального JavaScript это волшебно помещает div в фон. Обновление div и это возвращается далеко.

Так, может быть, попробуйте как-нибудь обновить div выпадающего меню, прямо перед отображением страницы?

EDIT: Из комментария Брэда, скопированного здесь для назидания будущих читателей: «Это помогло мне: http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/ Я установил #header, чтобы иметь z-индекс 2, и #content, чтобы иметь z-индекс 1. " - Брэд (5 часов назад)

Итак, подведем итог: в IE 6/7 есть ошибка z-index. Чтобы обойти это, явно установите z-index для элемента (-ов), который / появляется перед вашим меню, на небольшое число (например, 1), и установите z-index для контейнера вашего меню на немного более высокое номер (например, 2).

1 голос
/ 02 февраля 2009

Я установил #content z-index на 1

и установите z-индекс заголовка, где находится раскрывающаяся навигация 2. 2. 1003 *

...