выпадающее меню не будет отображаться снаружи, содержащее div в IE7 - PullRequest
Новая
       30

выпадающее меню не будет отображаться снаружи, содержащее div в IE7

1 голос
/ 28 мая 2010

Я вырываю голову из-за этого, у меня есть выпадающее меню с использованием CSS и jQuery (благодаря Сох Танака), и оно отлично работает в Firefox, Safari, Google Chrome и I.E. 8, но в IE 7 он не будет выпадать за пределы «Banner div». Однако он опускается ниже навигационного блока. Я переместил навигационный div выше в баннере, результат тот же, меню опускается, пока не достигнет границы баннерного div, а затем исчезает ....

Ниже приведен список CSS. Это мой первый сайт, и у меня есть ограниченное понимание того, что я делаю. Выпадающее меню включает в себя прозрачные png в виде ссылок (я знаю, я знаю ... но это то, что хочет Босс ...), пожалуйста, кто-нибудь может сделать быстрое сканирование на приведенном ниже CSS и сообщить мне, что случилось? Это какая-то форма ошибки z-index в IE? Я пробовал все разные комбинации z-index, и все же я не могу получить другой результат. , HTML ниже также.

Я установил все z-индексы на 0 из чистого разочарования, я знаю, что это не будет работать как есть.

Спасибо заранее 

#banner {
    position: relative;
    width: 62.5em;
    height: 12em;
        background-color: #46280A;
         background-image: url('images/includes/banner2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    -moz-box-shadow: -4px 6px 8px #000;
    -webkit-box-shadow: -4px 6px 8px #000;
    box-shadow: -4px 6px 8px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8,         Direction=225, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=225,     Color='#000000');
        z-index: 1;
}
/*------------------------------------SCROLLER---------------------------------------------*/

#headlines{
    position: absolute;
    top: 1.3em;
    right: 2.75em;
    overflow: hidden;
    height: 2.5em;
    width: 24em;
    background-color: #000000;
    display: block;
    z-index: 3;
}



#news{
    position: relative;
    height: 3.1em;
    line-height: 2.5em;
         font-size: 0.8em
    color: #FFFF99;
    white-space: nowrap;
    overflow: hidden;
    font-family: Georgia,Arial;   

}

#scrollerglass{
    position: absolute;
    top: 0.95em;
    right: 2em;
    height: 52px;
    width: 410px;
    border: none;
         padding: 0.2em 0em 0em 0em;
         line-height: 0.7em;
         text-align: center;
    background-image: url('images/includes/scrollerglass.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 20;
    z-index: 10;
 }

#scrollerglass a i {
     visibility: hiddn ;
 }

/ ------------------------------------- НАВИГАЦИЯ ----- ------------------------------------ / 

#nav   {
    position: absolute;
    top: 5.8em;
    left: 0.2em;
    font-family: trebuchet, sans-serif;
    font-size: 1em;
    line-height: 3.75em;
    text-align: center;
    color: #FFFF00;
    z-index: 3;

}

ul.navlist {
    list-style: none;
    padding: 0em;
    margin: 1em;
    float: left;
    width: 62.5em;
    background: transparent;
    font-size: 1em;
}   

ul.navlist li {
    position: relative;                 /*--Declare X and Y axis base for sub navigation--*/
    float: left;
    margin: 0em 1.4em;
    padding: 0em 0.7em 0em 0em;
    z-index: 1;                 
}

ul.navlist li a{
    display: block;
    text-decoration: none;
    float: left;
         border: 0px solid;
}

ul.navlist li img{
        border: 0px solid;
}

ul.navlist li span {                        trigger styles--*/
    width: 1.2em;
    height: 5.25em;
    float: left;
    background: url(images/links/downlogo.png) no-repeat center top;
}

ul.navlist li span.subhover {                           background-position: center bottom; 
    cursor: pointer;
}

ul.navlist li ul.navdrop {
    list-style: none;
    position: absolute;
    float: left;
         top: 5.3em;                    
    left: -2.4em;
    height: 15.0em;
    width: 11.25em;
    margin: 0;
    padding: 0.5em 0em 0em 0em;
    display: none;                              background-position: center;
    background-image: url('images/includes/slider.jpg');
    background-color: transparent;
    background-repeat: no-repeat;
    -moz-box-shadow: -4px 6px 8px #000;
    -webkit-box-shadow: -4px 6px 8px #000;
    box-shadow: -4px 6px 8px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=225, Color='#000000')";
     /* For IE 5.5 - 7 */
     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=225, Color='#000000');
    z-index:1;
 }

ul.navlist li ul.navdrop li{
    margin: 0em 2.3em 0em 0em; 
    padding: 1em 0em 0em 0em;
    width: 8em;
    clear: both;
}


html ul.navlist li ul.navdrop li a {
    border: 0px solid;
         width: 11.25em;
}


 html ul.navlist li ul.navdrop li a:hover {                      background: transparent;

 }


<div id="banner">

    <div id="headlines">

            <div id="news">
   Whatever we want to promote

            </div>      

    </div>
    <div id="scrollerglass">
         <a href="vintagecigars.php">
                     <i>------s-c-r-o-l-l-e-r - - - -l-i-n-k-s--------<br />
                   <br>------s-c-r-o-l-l-e-r - - - -l-i-n-k-s------</i></a>
    </div>  
    <div id="nav">
     <ul class="navmenu">
      <li><a href="index.php"><img src="images/links/home.png" alt="Home" ></a></li>
      <li><a href="ourbar.php"><img src="images/links/ourbar.png" alt="Our Bar" ></a>
        <ul class="navdrop">
        <li ><a href="ourcocktails.php"><img src="images/links/cockteles.png" alt="Our Cocktails" ></a></li>
       <li ><a href="celebrate.php"><img src="images/links/celebrate.png" alt="Celebrate in Style" ></a></li>
         </ul>
      </li> 
      <li><a href="ourcigars.php"><img src="images/links/ourcigars.png" alt="Our Cigars" ></a>
        <ul class="navdrop">
        <li ><a href="edicioneslimitadas.php"><img src="images/links/edicioneslimitadas.png" alt="Edition Limitadas" ></a></li>
         <li ><a href="cigartasting.php"><img src="images/links/cigartasting.png" alt="Cigar Tastings" ></a></li>
        </ul>
      </li>
      <li><a href="personalroller.php"><img src="images/links/personalcigar.png" alt="Personal Cigar Roller" ></a></li>
      <li><a href="galleryentrance.php"><img src="images/links/photogallery.png" alt="Photo Gallery" ></a></li>
      <li><a href="contactus.php"><img src="images/links/contactus.png" alt="Contact Us" ></a></li>
</ul></div></div><!--end banner-->

Ответы [ 4 ]

2 голосов
/ 30 мая 2010

ОК, я исправил это. Ответ заключается в том, что раскрывающийся список не будет отображаться поверх эффекта «фильтра» в IE. 7 и ниже.

Прошу прощения у всех вас, пользователей IE 7, но для вас это выглядит не очень красиво

1 голос
/ 30 сентября 2010

Другое решение, которое я нашел для моего выпадающего меню, - добавить к содержимому Div z-index: -1;

0 голосов
/ 28 мая 2010

Пожалуйста, просмотрите ваш HTML.

Однако, скажем, это ваша структура (упрощенно): 

<div id="#nav">
     <ul>
         ...
     </ul>
</div>
<div id="content">
</div>

Вы должны убедиться, что # nav z-index больше, чем #content. Итак: 

#nav {
    position:relative;
    z-index:2;
}
#content {
    position:relative;
    z-index:1;
}

Не забывайте, что z-index работает только с элементами, которые имеют position, кроме static (по умолчанию);

Идея состоит в том, что родительский элемент элемента, который не показан (родительский элемент раскрывающегося списка), должен иметь z-индекс больше, чем элемент, который "перекрывает" раскрывающийся список.

Вы можете прочитать отличную статью на эту тему здесь: http://aplus.rs/lab/z-pos/

0 голосов
/ 28 мая 2010

Я не могу точно сказать, что происходит только по вашему CSS, но у меня была похожая проблема, и она не позволяла мне зависать, если в выпадающем разделе не было фонового цвета, иначе он "просвечивал" это и потеряет зависание. Вы можете попробовать это.

...