IE7 Z-Index问题（CSS DropDown） [英] IE7 Z-Index Issue (CSS DropDown)

问题描述

我已经尝试过使用JQuery和CSS技巧的几个不同的修补程序，但我似乎不能得到我的下拉菜单放在我的手风琴滑块在IE7的顶部。它似乎工作正常在任何其他网络浏览器。

I have tried a few different fixes using JQuery and CSS Tricks, but I can't seem to get my drop down menu to lay over top of my accordion slider in IE7. It seems to work fine in any other web browser. Any help would be greatly appreciated.

代码段：

HTML / p>

HTML

<div class="shell">
<div class="border">
        <div id="header">
          <h1 id="logo"><img src="" class="logo" /></h1>

          <div class="cl">&nbsp;</div>
        </div>
        <div id="nav">      
            <ul class="menu">
                <li class="current_page_item"><a href="index.php?selected=1">Home</a></li> 
                <li ><a href="#">Applications</a> 
                    <ul class="sub-menu"> 
                        <li><a href="#">Sub1</a></li> 
                        <li><a href="#">Sub2</a></li> 
                        <li><a href="#">Sub3</a></li>
                    </ul> 
                </li> 
                <li ><a href="#">Products</a> 
                    <ul class="sub-menu"> 
                        <li><a href="#">Sub1</a></li> 
                        <li><a href="#">Sub2</a></li> 
                        <li><a href="#">Sub3</a></li> 
                        <li><a href="#">Sub4</a></li> 
                    </ul> 
                </li> 
                <li ><a href="#">News/Media</a></li> 
                <li ><a href="#">About Us</a></li> 
                <li ><a href="#">Contact</a></li> 
            </ul>   
        </div><!--end nav-->    
<div id="accordion-1">
    <dl>
        <dt>Slide 1</dt>
            <dd>
                <h2><img src="images/accordian/efficacy.jpg" />Slide 1</h2>
                <p>Slide 1</p>
            </dd>
        <dt>Slide 2</dt>
            <dd>
                <h2><img src="images/accordian/accuracy.jpg" />Slide 2</h2>
                <p>Slide2</p>
            </dd>
        <dt>Slide 3</dt>
            <dd>
                <h2><img src="images/accordian/cost.jpg" />Slide 3</h2>
                <p>Slide 3 </p>
            </dd>
    </dl>
</div>

CSS

/* --------- */
/* -- Nav -- */
/* --------- */
#nav { height:43px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;  }
.menu { padding: 7px 6px 0 0; }
.menu li { margin: 0 5px; float: left; list-style:none; position:relative; border-right: 1px solid #DBDBDB; }
.menu a { display: block; padding:  8px 15px; margin: 0; color: #555; text-decoration: none; font-size: 15px; }
.menu .current a, .menu li:hover > a { color: #CA9800; }
.menu ul li:hover a, .menu li:hover li a { color: #555; }
.menu ul a:hover { background: #CA9800 !important; color: #fff !important; }
.menu ul { background: #eee; display: none; margin: 0; padding: 0; width: 250px; position: absolute; top: 35px; border: solid 1px #ddd; z-index:9000 !important; }
.menu li:hover > ul { display: block; }
.menu ul li { float: none; margin: 0; padding: 0; }
.menu ul a { font-size: 14px; }
.menu ul ul { left: 250px; top: -3px; }
.menu li.current_page_item a { color: #CA9800; }
.menu .sub-menu li.current_page_item a { color: #CA9800; }

/* --------------- */
/* -- ACCORDIAN -- */
/* --------------- */

/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */

.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}


/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */

dd p{line-height:120%}

#accordion-1{width:800px;height:245px;padding:20px;background:#fff;margin:0 0 0 60px; z-index:1;}
#accordion-1 dl{width:800px;height:245px}   
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: arial, sans-serif; text-transform:uppercase;letter-spacing:1px;background:#fff url(../images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#BF8530}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(../images/slide-active.jpg) 0 0 no-repeat}
#accordion-1 dt.hover{color:#BF8530;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 dd{padding:25px;background:url(../images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#BF8530}
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
#accordion-1 h2{font-size:2.5em;margin-top:10px}
#accordion-1 .more{padding-top:10px;display:block}

推荐答案

添加 position：relative; 到下拉的部分。根据这，它通常会解决您的问题。

You may want to add position:relative; to the part that's dropping down. According to this it'll usually solve your problem.

这篇关于IE7 Z-Index问题（CSS DropDown）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！