# CSS dropdown menu in IE8 stuck behind flash banner



## ryan_holt (Aug 26, 2010)

Hey,

I'm wondering if anyone could help me out.

I've just finished a pretty basic website, built in Dreamweaver 8 and am including a CSS menu with dropdown for the first time.
The coding I have used thus far works in both Google Chrome and Apple Safari 4 however, the dropdown menu will not come to the front in IE8 (it is visable just behind the swf).

The website is http://www.bthsecurity.com.au/index2.html (this is my test page so i don't screw up the whole site)
(feel free to view it in Google Chrome or Safari to see how it should appear)

I had this issue with Google Chrome to start with and another forum mentioned opacity. So i added opaque values to the swf properties and this fixed it for Google Chrome and Apple Safari.

CSS Code:


```
.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}
.menu ul{
	background:#0400a2;
	height:25px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:#0400a2 url("images/seperator.gif") bottom right no-repeat;
		color:#ffffff;
		display:block;
		font-weight:normal;
		line-height:25px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #ff9900 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#0400a2;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:225px;
		z-index:1000;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:225px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:25px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#ff9900 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}
```
HTML Code:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BTH Security Doors and Screens</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Century Gothic, Verdana, Arial;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.style1 {font-size: 9px}
.style2 {font-size: 12px}
-->
</style>
<link href="menu/menu_style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style22 {color: #FFFFFF}
.style23 {
	font-size: 18px;
	font-family: "Trebuchet MS", Verdana, Arial;
	color: #0400A2;
}
a:link {
	color: #0500A2;
}
a:hover {
	color: #0500A2;
}
-->
</style>
</head>

<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="8" valign="top"><div align="right"><img src="images/left-banner.jpg" width="27" height="1017"></div></td>
    <td height="120" valign="middle"><img src="images/logo_banner4.jpg" width="900" height="100"></td>
    <td rowspan="8" valign="top"><img src="images/right-banner.jpg" width="27" height="1017"></td>
  </tr>
  <tr>
    <td>
      <div class="menu">
<ul>
<li><a href="index.html" target="_self" class="style22" >Home</a></li>
<li><a href="html/about.html" target="_self" >About Us</a></li>
<li><a href="html/products.html" target="_self" >Products</a>
<ul>
<li><a href="html/security_doors.html" target="_self">Security Doors & Screens</a></li>
<li><a href="html/cast_panel.html" target="_self">Cast Panel Safety Doors & Screens</a></li>
<li><a href="html/fly.html" target="_self">Fly Doors & Screens</a></li>
<li><a href="html/retractable_screens.html" target="_self">Retractable Screens</a></li>
<li><a href="html/repairs.html" target="_self">Repairs & Accessories</a></li>
</ul>
</li>
<li><a href="html/redback.html" target="_self" >Redback Storage</a></li>
<li><a href="html/contact.html" target="_self" >Contact Us</a></li>
</ul>
</div>
	</td>
  </tr>
  <tr>
    <td height="120" align="left" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="120">
      <param name="movie" value="swf/banner.swf">
      <param name="quality" value="high">
      <embed src="swf/banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="120" wmode="opaque"></embed>
    </object></td>
  </tr>
  <tr>
    <td height="5">&nbsp;</td>
  </tr>
  <tr>
    <td><table width="900" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="80">&nbsp;</td>
        <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td valign="top"><span class="style23">Welcome to BTH Security Doors &amp; Screens</span></td>
            <td align="right" valign="top">&nbsp;</td>
          </tr>
          <tr>
            <td width="66%" valign="top"><p class="style2"><br>
              With Pride we present Quality Products, Reliable Service and Workmanship for all your home security screen door and window needs. </p>
              <p class="style2">Our Promise at BTH Security is to custom make security products utilising heavy duty materials, whilst continuing to source the latest new release products.</p>
              <p class="style2"> Our family owned business was established in 1995 and currently services many areas including Gawler, Barossa Valley, Adelaide Plains, Northern Suburbs, Adelaide and surrounding areas. </p>
              <p class="style2">To compliment our selection of Security Door and Screen products we offer a variety of Cast Panel Doors, Redback Storage Systems and&nbsp;a comprehensive Repair Service for all your Re-Meshing and Lock Repair requirements.</p>
              <p class="style2">&nbsp;</p>
              <p class="style2">Quality Products, Reliable Service &amp; Workmanship, From Our Family To Yours!</p>
              <p class="style2">&nbsp;</p></td>
            <td width="34%" align="right" valign="top"><p><br>
            <span class="style2"><br>
                <br>
                </span></p>              </td>
          </tr>
        </table>          </td>
        <td width="80">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td><div align="center"><span class="style1">&copy;&nbsp;2010</span><span class="style1" id="ctl00_getcompanyname">&nbsp;| BTH Security&nbsp;</span><span class="style1" id="ctl00_getaddress">| 33 Parkers Road Gawler Belt SA 5118</span><span class="style1" id="ctl00_getphone">&nbsp;| Phone: 08 8523 2690</span><span class="style1">&nbsp;<br>
          <a href="index.html" tabindex="1">Home</a>&nbsp;|&nbsp;<a href="html/about.html" tabindex="2">About Us</a>&nbsp;|&nbsp;<a href="html/contact.html" tabindex="3">Contact Us</a></span></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
```
I have attached the menu css file and index2 html in .txt format for convenience.

Any help and code change suggested would be MUCHLY appreciated.

Cheers,

Ryan.


----------



## colinsp (Sep 5, 2007)

I suspect that you have a z index problem in that you have set a value for the menu and not one for the flash (that I can see in your code). Have a read about z index *here* and set one for the flash element.

You have a lot of errors on the page see *here* and they may be contributing to your problems. Correct these and you may be OK.

As an aside you have made a good start using CSS but then spoilt it by using tables for positioning, this is not a recommended way of doing positioning. You ought to look at converting all your layout to css and removing the css in your head from the page and putting it in your css file, this is Dreamweavers doing.


----------

