下拉菜单不会在IE7

外面显示包含分区

我撕我的头发在此，我使用CSS和jQuery（感谢公所田中）有一个下拉菜单，它完美的作品在Firefox，Safari浏览器，谷歌Chrome和IE 8，但在IE 7中，它不会掉到'Banner div'之外。然而，它下降到导航div下面。我提出的资产净值股利的旗帜更高的结果是一样的，菜单下降，直到它到达旗帜div的边框上，然后消失....下拉菜单不会在IE7

下面是CSS。这是我的第一个网站，我对我正在做的事情有一些有限的理解。下拉菜单包括透明PNG的链接（我知道，我知道...但这是老板想要的...）请有人可以在下面的CSS快速扫描，让我知道什么是粗呢？这是IE z-index错误的一些形式吗？我已经尝试了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-->

来源

2010-05-27 user335780

我不能准确的告诉怎么回事只是你的CSS，但我也有过类似的问题，它woldn't让我徘徊，除非下拉部分对其有一个背景颜色，否则会“识破'它并失去悬停状态。你可以试试。

来源

2010-05-27 22:29:18 chadley

如果你去http://nuweb.lascasadelhabanoplayadelcarmen.com，在IE中。 7你应该看看是什么意思。请记住，我仍然在构建这个（是的，我知道它很重），并且我已经将导航分区移到了更高的位置，以便使效果更加清晰 – user335780 2010-05-27 22:59:16

该链接对我来说似乎不起作用。 – chadley 2010-05-27 23:12:22

啊，那是因为我拼写错了http：//nuweb.lacasadelhabanoplayadelcarmen。com 尝试这一个，不是好兆头吧..... – user335780 2010-05-27 23:37:02

请同时查看您的HTML。

但是，让我们说这是你的结构（简体）：

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

您必须验证，即＃资产净值的z-index比的#content更大。所以：

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

不要忘了，只有在具有比static（默认值）的position元素z-index作品;

这个想法是，没有显示的元素的父（下拉元素的父），必须有z-index大于“重叠”下拉的元素。

你可以阅读关于这个问题在这里的优秀文章：http://aplus.rs/lab/z-pos/

来源

2010-05-27 22:48:23

te问题不是它隐藏在其他内容后面，问题是它不会显示在“横幅”div之外。我得到一个可爱的滚动效果，直到它碰到这个元素的边缘，这是它包含div的父元素，然后它消失 – user335780 2010-05-27 22:56:47

您提供的链接似乎不起作用。你也有一些互动，即javascript？也许尝试使用http://jsfiddle.net/为了查看问题？ – 2010-05-27 23:11:50

啊，那是因为我拼写错了nuweb.lacasadelhabanoplayadelcarmen.com尝试这一个，不是好兆头吧..... 有没有想法如何使用jFiddle，我把所有的东西都放在他们的或者只有相关的位码？如果我无法确定导致问题的原因，我怎么知道哪些是相关位？ – user335780 2010-05-28 00:05:06

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

对不住你IE 7个用户，但看你这么漂亮，它只是不是要去。

来源

2010-05-29 21:42:09 user335780

我在下拉菜单中找到的另一个解决方案是添加到内容Div z-index：-1;

来源

2010-09-29 20:12:17 Remembers

下拉菜单不会在IE7

回答

相关问题