drop down menu will not display outside containing div in IE7..
- by playahabana
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.
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-->
