Question

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.

Code snippets::

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}

Answer 1

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