drop down menu will not display outside containing div in IE7..

Question

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....

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.

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

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-->

Answer 1

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.

Answer 2

Please also view your 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 {
    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);

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.

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

Answer 3

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

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

Answer 4

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