下拉菜单将不会显示在IE7中包含div的外部

I am tearing my hair out over this, I have a dropdown menu using CSS and jQuery (thanks to Soh Tanaka) and it works perfectly in Firefox, Safari, Google chrome and I.E. 8, but in IE 7 it will not drop down outside the 'Banner div'. It drops below the nav div however. I have moved the nav div higher in the banner the result is the same, menu drops until it reaches the border of the banner div and then vanishes....

我正为此抓狂，我有一个使用CSS和jQuery的下拉菜单(多亏了Soh Tanaka)，它在Firefox、Safari、谷歌chrome和IE 7中都很好用，但在IE 7中，它不会掉到“Banner”之外。但是它低于nav div。我已经nav div的旗帜的结果是相同的,菜单下降,直到它到达边境的标语div然后消失....

Below is the css. This is my first website and I have some limited understanding of what I am doing. The drop down menu includes transparent png's as links (I know, I know...but it's what the Boss wants...) please could someone take a quick scan at the below CSS and let me know what is wroong? Is this some form of the IE z-index bug? i have tried all different combinations of z-index and still I can't get a different result. . The html is below as well.

下面是css。这是我的第一个网站，我对我正在做的事情有一些有限的了解。下拉菜单包括透明的png作为链接(我知道，我知道……)但是这是老板想要的…)请大家快速浏览一下下面的CSS并告诉我什么是wroong?这是某种形式的IE z-index错误吗?我尝试了所有不同的z指数组合，但仍然不能得到不同的结果。html也在下面。

I set all the z-indexes to 0 out of sheer frustration, I know it won't work as is.

我把所有的z指标都设为0，完全是出于挫败感，我知道这样行不通。

Thankyou in advance

谢谢提前

#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 ;
 }

/-------------------------------------NAVIGATION-----------------------------------------/

/ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -导航- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /

#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 个解决方案

#1

OK, I've fixed it. The answer is that the drop-down will not display over the 'filter' effect in IE. 7 and below.

好的,我固定它。答案是下拉菜单不会显示在IE的“过滤器”效果上。7下面。

Apologies to all you IE 7 users, but it's just not gonna look so pretty for you.

向IE 7的所有用户道歉，但这对你来说并不好看。

#2

Another solution which I found for my dropdown menu is to add to the content Div z-index:-1;

下拉菜单的另一个解决方案是添加到content Div z-index:-1;

#3

I can't tell exactly whats going on just by your css, but I have had a similar problem and it woldn't let me hover unless the drop down section had a background color on it otherwise it would 'see through' it and lose the hover state. You could try that.

我不知道你的css究竟是怎么回事，但我也遇到过类似的问题，它不会让我悬停，除非下拉部分有一个背景色，否则它会“看穿”它并失去悬停状态。你可以试试。

#4

Please also view your HTML.

请也查看您的HTML。

However, let's say this is your structure (simplified):

但是，假设这是你的结构(简化):

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

You have to verify, that #nav's z-index is bigger than that of #content. So:

你必须验证#nav的z索引大于#content。所以:

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

Don't forget, that z-index works only on the elements that have position other than static (default);

不要忘记，z-index只作用于具有非静态位置的元素(默认);

The idea is that parent of the element that is not shown (parent of the drop-down element), has to have z-index bigger, than the element that "overlaps" the drop-down.

其思想是，未显示元素的父元素(下拉元素的父元素)必须具有比“重叠”下拉元素更大的z-index。

You can read an excellent article on the subject here: http://aplus.rs/lab/z-pos/

您可以在这里阅读一篇关于这个主题的优秀文章:http://aplus.rs/lab/z-pos/