# Solved: Drop-down menu issue in IE



## DrDing (Dec 20, 2010)

Hi all,

Ok so I have a animated photo banner made in Flash and embedded in the homepage of the site I'm working on. I also have a horizontal navigational bar with drop down menus (coded in the css) that in Firefox, passes over the banner no problem. Meanwhile in IE, it looks as though the drop-down menus that are long enough to reach the banner are slipping behind it, rather then over it. 
Now I've set the z-index of the banner to like 1, while the z-index on the menu is like 100, so well above the banner layer. I'm thinking there's something here I'm just not seeing and would really love some advice.

Here's my embedding code:

```
<div id="photobanner">
    
<object width="898" height="239">
<param name="movie" value="images/photobanner_main.swf"/>
<embed src="images/photobanner_main.swf" width="898" height="239">
</embed>
</object>

        </div>
```
And here's the CSS for my menu:


```
/*menu css*/

/* Main menu settings */

#mainmenu {
   background-color:#ffffff;
   clear:both;
   float:left;
   margin:0;
   padding:0;
   width:1024px;
   height:42px;
   font-family:cambria; /* Menu font */
   font-size:14px; /* Menu text size */
   z-index:100; /* This makes the dropdown menus appear above the page content below */
   position:absolute; 
   top: 0px;
}

/* Top menu items */

#mainmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
   top:5px;
}

#mainmenu ul li {
   margin:0 0 0 1px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
}

#mainmenu ul li a {
   display:block;
   margin:0;
   padding:.6em .5em .4em;
   font-size:14px;
   line-height:1em;
   background:#ffffff;
   text-decoration:none;
   color:#532f91;
   font-weight:bold;

}

#mainmenu ul li.active a {
   color:#fff;
   background:#000;
}

#mainmenu ul li a:hover {
   background-color:#d5cbe6; /* Top menu items background colour */
   color:#ffffff;

}

#mainmenu ul li:hover a,
#mainmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:#d5cbe6; /* Top menu items background colour */
   color:#000000;
 
}

/* Submenu items */

#mainmenu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top: 2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:150px; /* width of the drop-down menus */
   
}
#mainmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
}

#mainmenu ul ul li a,
#mainmenu ul li.active li a,
#mainmenu ul li:hover ul li a,
#mainmenu ul li.hover ul li a{ /* This line is required for IE 6 and below */
   font-size:14px;
   font-weight:normal;   /* resets the bold set for the top level menu items */
    color:#ffffff;
    background:#6d49ab;
     line-height:1.4em;   /* overwrite line-height value from top menu */
}

#mainmenu ul ul li a:hover,
#mainmenu ul li.active ul li a:hover,
#mainmenu ul li:hover ul li a:hover,
#mainmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
    background:#d5cbe6;
   color:#000000;
}

/* Flip the last submenu so it stays within the page */
#mainmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#mainmenu ul li:hover ul,
#mainmenu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}

/* end menu css */
```
And finally here's my css code for the photo banner:


```
#photobanner{
position:absolute;
z-index:1;
left: 50px;
width: 898px;
height:239px;
}
```
Please let me know if you need more information. Thanks!


----------



## omuyelijah (Jan 10, 2006)

Hi,

can u give a link to the site So we see it?


----------



## DrDing (Dec 20, 2010)

Under contract I don't think I can. However, I whipped up a little test page with the banner and nav bar on it so you can see what's going on.

Don't know if it helps but for my IE testing I'm using version 8, and it's where the overlapping problem is happening. I don't know about older versions of FF but right now I'm testing with 3.6.13 and no problems there.

http://184.154.164.202/~thewilso/test.html


----------



## DrDing (Dec 20, 2010)

Found a solution with a bit more digging around. I had no idea this can be a common problem with flash objects. What I needed to do was add a few attributes to my embedding code.

I found the answer here: http://www.projectseven.com/support/answers.asp?id=127

Basically *param name="wmode" value="opaque"* needed to be added in my opening object tag and *wmode="opaque"* needed to be added to my embed tag. 
Also my z-indexes are still 1 for the banner and 2 or higher for the main div/container div of the menu.

So here's the new embedding code:


```
<div id="photobanner">
<object width="898" height="239" param name="wmode" value="opaque">
<param name="movie" value="images/photobannertest.swf"/>
<embed src="images/photobannertest.swf" width="898" height="239" wmode="opaque">
</embed>
</object>
</div>
```


----------

